/* ============================================================
   知几 — 东方日出·暖白 Jade Skin
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg-deep:#F7F3E8;--bg-mid:#EDE8D8;--bg-card:rgba(0,0,0,0.02);--border:rgba(0,0,0,0.08);
  --text:#3a3530;--text-dim:#8a8078;--accent:#C49A5F;--accent-hov:#D4AF6A;--accent-soft:#B8894A;
  --gold:rgba(196,154,95,0.08);--gold-border:rgba(196,154,95,0.22);
  --glass-bg:rgba(247,243,232,0.7);--glass-border:rgba(196,154,95,0.12);
  --ease-out:cubic-bezier(0.25,1,0.5,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  /* 法餐级令牌 */
  --space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;
  --shadow-md:0 4px 16px rgba(0,0,0,0.08);--shadow-lg:0 8px 32px rgba(0,0,0,0.12);
  --duration-fast:120ms;--duration-normal:250ms;--duration-slow:400ms;
  --z-drawer:999;--z-overlay:998;--z-modal:10000;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans SC","Helvetica Neue",Arial,sans-serif;
  background:#F7F3E8;
  color:var(--text);min-height:100vh;overflow-x:hidden;position:relative;
}

/* ── 暖阳叠色背景 ── */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(147,112,219,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(255,127,80,0.10) 0%, transparent 50%),
    #F7F3E8;
}

/* ── 日晷在 sundial.css ── */

/* ── 星尘干支 · 暗蓝雕刻 ── */
.dust-chars{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.dust-char{
  position:absolute;font-family:"Noto Serif SC","SimSun",serif;
  color:#0A2A5E;opacity:0.18;
  font-weight:500;
  text-shadow:0 1px 2px rgba(10,42,94,0.15),0 0 6px rgba(247,243,232,0.4);
  user-select:none;letter-spacing:0.05em;
  animation:dust-spiral 30s ease-in-out infinite;
}
@keyframes dust-spiral{
  0%{transform:translate(0,0) rotate(0deg) scale(1)}
  20%{transform:translate(-25px,18px) rotate(3deg) scale(1.02)}
  40%{transform:translate(8px,-22px) rotate(-2deg) scale(0.96)}
  60%{transform:translate(20px,12px) rotate(1deg) scale(1.03)}
  80%{transform:translate(-12px,-16px) rotate(-3deg) scale(0.97)}
  100%{transform:translate(0,0) rotate(0deg) scale(1)}
}

/* ── 汉堡菜单（统一由下方 「汉堡菜单 — 统一版本」 定义）── */

/* ── 金箔阻尼线 ── */
.gold-foil{
  height:1px;width:100%;margin:0 auto 1.5rem;
  background:
    repeating-linear-gradient(90deg,
      rgba(196,154,95,0.28) 0px,
      rgba(196,154,95,0.06) 3px,
      rgba(196,154,95,0.24) 6px,
      transparent 8px
    ),
    linear-gradient(90deg,
      transparent 0%,
      rgba(196,154,95,0.12) 20%,
      rgba(196,154,95,0.30) 50%,
      rgba(196,154,95,0.12) 80%,
      transparent 100%
    );
}

/* ── 页面布局 ── */
#main-wrapper{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:2rem 1.5rem 16rem}
#app{width:100%;max-width:960px;margin:0 auto;padding:2rem 1.5rem calc(4rem + env(safe-area-inset-bottom,0px));position:relative;z-index:2}
#app.landing{max-width:760px}
.landing{display:flex;flex-direction:column;gap:2rem}

/* ── 顶部 ── */
#app header{text-align:center;margin-bottom:1.25rem;position:relative}
.home-link{position:absolute;left:0;top:.3rem;font-size:.8rem;color:var(--text-dim);text-decoration:none;opacity:.55;transition:opacity .25s;letter-spacing:.04em}
.home-link:hover{opacity:1;color:var(--accent)}
h1{font-family:'Cinzel',serif;font-weight:700!important;font-size:2.2rem;letter-spacing:.08em;margin-bottom:.3rem;background:linear-gradient(135deg,#C49A5F,#B8894A,#A07840);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none}
.subtitle{color:var(--text-dim);font-size:.85rem;letter-spacing:.05em}

/* ── Landing ── */
.landing-header{text-align:center;margin-bottom:2.5rem;padding-top:1.5rem}
.landing-title{font-family:'Cinzel',serif;font-style:italic;font-weight:700!important;font-size:3.2rem;letter-spacing:.08em;margin-bottom:.15rem;background:linear-gradient(135deg,#C49A5F,#B8894A,#A07840);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.landing-subtitle{font-size:1rem;color:rgba(180,140,100,0.5);letter-spacing:.24em;margin-bottom:.6rem}
.landing-tagline{font-size:.82rem;color:var(--text-dim);letter-spacing:.06em;opacity:.7}
.landing-main{display:flex;flex-direction:column;gap:2rem}
.landing-section{line-height:2;font-size:.92rem;color:#4a4540}
.landing-section p{margin-bottom:1.25rem}
.landing-section p:last-child{margin-bottom:0}
.landing-section strong{color:#8a6d40}

.dual{display:flex;gap:2.5rem;flex-wrap:wrap}
.dual-col{flex:1;min-width:240px}
.dual-col:first-child{flex:1.15}.dual-col:last-child{flex:0.85;min-width:280px}
.dual-col strong{color:#C49A5F;display:block;margin-bottom:0.3rem;font-size:0.95rem}
.dual-col p{font-size:.88rem;line-height:1.95}

.portals{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}
.portal-card{
  display:flex;flex-direction:column;align-items:center;gap:.65rem;
  padding:2rem 1.8rem;border-radius:16px;text-decoration:none;
  border:1px solid var(--gold-border);background:rgba(196,154,95,0.04);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .4s var(--ease-out),border-color .4s,box-shadow .4s,background .4s;
  min-width:220px;flex:1;max-width:300px;cursor:pointer;color:var(--text);
}
.portal-card:hover{
  background:rgba(196,154,95,0.08);border-color:rgba(196,154,95,0.35);
  box-shadow:0 0 24px rgba(196,154,95,0.08);transform:translateY(-2px);
}
.portal-icon{font-size:2.2rem}
.portal-title{font-size:1.15rem;font-weight:600}
.portal-desc{font-size:0.8rem;color:var(--text-dim)}
.portal-disabled{opacity:0.3;pointer-events:none;cursor:not-allowed}

/* ── 方舟区 ── */
.intent-block{
  background:rgba(247,243,232,0.65);border-radius:16px;padding:1.5rem 1.2rem;margin-bottom:1.8rem;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(196,154,95,0.08);
}

/* ── 按钮行 ── */
.mode-switch{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.75rem}
.style-section{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.tone-section{display:flex;align-items:center;gap:.7rem;margin-bottom:.85rem}
.style-label,.tone-label{font-size:.85rem;color:var(--text-dim);font-weight:600;letter-spacing:.05em}
.style-group{display:flex;flex-wrap:nowrap;gap:.35rem}
.tone-group{display:flex;gap:.35rem}

.style-btn{
  background:transparent;border:1.5px solid var(--border);color:var(--text-dim);
  font-size:.82rem;font-weight:600;padding:.35rem .85rem;border-radius:16px;cursor:pointer;
  transition:all .25s;letter-spacing:.03em;
}
.tone-btn{
  background:transparent;border:1.5px solid var(--border);color:var(--text-dim);
  font-size:.8rem;font-weight:600;padding:.32rem .75rem;border-radius:16px;cursor:pointer;
  transition:all .4s;letter-spacing:.03em;
}
.style-btn:hover,.tone-btn:hover{border-color:var(--accent-soft);color:#8a6d40}
.style-btn.active{
  background:rgba(196,154,95,0.15);border-color:var(--accent);color:#7a5c30;
  box-shadow:0 0 10px rgba(196,154,95,0.15);
}
.tone-btn.active{
  background:rgba(196,154,95,0.12);border-color:var(--accent);color:#7a5c30;
  box-shadow:0 0 10px rgba(196,154,95,0.12);
}

/* ── 表单 ── */
#divination-form{display:flex;flex-direction:column;gap:.65rem;margin-top:.5rem}
#divination-form label{font-size:.95rem;color:#5a5048}
#question{
  width:100%;padding:.8rem 1rem;border:1px solid var(--glass-border);border-radius:12px;
  background:rgba(255,255,255,0.4);color:var(--text);font-size:1rem;resize:vertical;
  outline:none;transition:border-color .25s;font-family:inherit;
}
#question:focus{border-color:var(--accent)}
.num-input{
  width:7rem;padding:.55rem .7rem;border:1px solid var(--glass-border);border-radius:10px;
  background:rgba(255,255,255,0.4);color:var(--text);font-size:0.95rem;text-align:center;
  outline:none;transition:border-color .25s;font-family:inherit;
}
.num-input:focus{border-color:var(--accent)}
#number-inputs,#time-confirm{transition:opacity .3s}
#number-inputs.hidden,#time-confirm.hidden{display:none}
#submit-btn{
  padding:.85rem 1.5rem;border:none;border-radius:12px;background:var(--accent);color:#fff;
  font-size:1rem;font-weight:600;cursor:pointer;
  transition:background .4s,transform .4s,box-shadow .4s,opacity .4s;letter-spacing:.06em;
  align-self:flex-start;
}
#submit-btn:hover:not(:disabled){background:var(--accent-hov);transform:translateY(-1px)}
#submit-btn:disabled{background:#d4c8b0;color:#a09888;cursor:not-allowed;opacity:.55}
#submit-btn:not(:disabled){animation:goldPulse 5s linear infinite;cursor:pointer}
@keyframes goldPulse{
  0%,100%{box-shadow:0 0 8px rgba(196,154,95,0.15)}
  50%{box-shadow:0 0 14px rgba(196,154,95,0.3)}
}

/* ── 起卦区 ── */
.cast-area{padding:2rem 0}
.cast-progress{text-align:center}
.cast-progress h3{font-size:1.1rem;color:var(--text-dim);margin-bottom:1.8rem;letter-spacing:0.1em}
.cast-coins{display:flex;justify-content:center;gap:2.5rem;margin-bottom:2rem}
.coin{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:80px;height:80px;border-radius:50%;
  background:
    radial-gradient(circle at 38% 32%,#fdf3d8 0%,#e8d5a3 8%,#d4b870 25%,#c4a450 45%,#a07828 70%,#7a5018 90%,#5a3810 100%);
  border:3px solid #8a6820;
  box-shadow:
    0 0 0 2px rgba(180,150,100,0.4),
    0 4px 16px rgba(80,50,20,0.3),
    0 8px 30px rgba(60,30,10,0.15),
    inset 0 2px 4px rgba(255,255,255,0.25),
    inset 0 -2px 4px rgba(0,0,0,0.15);
  font-size:0.85rem;color:#4a2808;font-weight:700;
  transition:transform 0.3s,box-shadow 0.3s;
  margin-bottom:1.5rem;
}
.coin::before{
  content:'';position:absolute;width:18px;height:18px;
  background:#F7F3E8;transform:rotate(45deg);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.4),0 1px 0 rgba(255,255,255,0.3);
  z-index:1;
}
.coin::after{
  content:attr(data-face);position:absolute;bottom:-1.5rem;left:50%;
  transform:translateX(-50%);font-size:0.82rem;color:var(--text-dim);
  font-weight:500;white-space:nowrap;letter-spacing:0.06em;
}
.coin.rolling{animation:coin-flip 0.6s cubic-bezier(0.25,0.46,0.45,0.94) infinite}
.coin.holding{transform:scale(0.92);filter:brightness(0.85);transition:all 0.15s ease}
.btn-toss.pressing{transform:scale(0.96);background:rgba(196,154,95,0.2);box-shadow:inset 0 2px 8px rgba(0,0,0,0.1)}
.coin.heads{box-shadow:0 0 0 2px rgba(160,130,90,0.5),0 0 30px rgba(139,115,85,0.4),0 4px 16px rgba(80,50,20,0.3),inset 0 2px 4px rgba(255,255,255,0.25),inset 0 -2px 4px rgba(0,0,0,0.1)}
.coin.tails{box-shadow:0 0 0 2px rgba(150,120,80,0.35),0 0 20px rgba(120,90,55,0.3),0 4px 14px rgba(80,50,20,0.2),inset 0 2px 4px rgba(255,255,255,0.18),inset 0 -2px 4px rgba(0,0,0,0.08)}
@keyframes coin-flip{
  0%{transform:rotateX(0) rotateY(0) rotateZ(0) scale(1)}
  25%{transform:rotateX(540deg) rotateY(30deg) rotateZ(15deg) scale(1.08)}
  50%{transform:rotateX(1080deg) rotateY(-30deg) rotateZ(-10deg) scale(1.14)}
  75%{transform:rotateX(1620deg) rotateY(15deg) rotateZ(5deg) scale(1.04)}
  100%{transform:rotateX(2160deg) rotateY(0) rotateZ(0) scale(1)}
}

.btn-toss{
  padding:0.8rem 2.5rem;background:rgba(196,154,95,0.08);border:1px solid var(--gold-border);
  border-radius:8px;color:#8a6d40;font-size:1rem;cursor:pointer;letter-spacing:0.15em;transition:all 0.3s;user-select:none;-webkit-user-select:none
}
.btn-toss:hover{background:rgba(196,154,95,0.16);box-shadow:0 0 20px rgba(196,154,95,0.15)}
.btn-toss:disabled{opacity:0.4;cursor:not-allowed}

.cast-log{margin-top:1.5rem;display:flex;flex-direction:column;gap:0.4rem;align-items:center}
.cast-log-entry{font-size:0.85rem;color:var(--text-dim);letter-spacing:0.05em}

/* ── 手动选卦 ── */
.manual-section{padding:2rem 0;text-align:center}
.manual-title{font-size:1.1rem;color:var(--text);margin-bottom:0.3rem;letter-spacing:0.1em}
.manual-hint{font-size:0.78rem;color:var(--text-dim);margin-bottom:1.2rem}
.yao-picker-list{display:flex;flex-direction:column;gap:0.5rem;max-width:420px;margin:0 auto 1.5rem}
.yao-picker-row{display:flex;align-items:center;gap:0.6rem;padding:0.4rem 0.8rem;background:rgba(0,0,0,0.02);border:1px solid var(--border);border-radius:8px}
.yao-picker-row .row-label{min-width:2.8rem;font-size:0.82rem;color:var(--text-dim);text-align:right}
.yao-option{flex:1;padding:0.4rem 0.2rem;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--text-dim);cursor:pointer;font-size:0.78rem;transition:all 0.2s;text-align:center}
.yao-option:hover{background:rgba(196,154,95,0.05);border-color:var(--gold-border);color:var(--text)}
.yao-option.selected{background:rgba(196,154,95,0.12);border-color:rgba(196,154,95,0.4);color:#8a6d40;box-shadow:0 0 10px rgba(196,154,95,0.08)}
.yao-option .opt-sym{display:block;font-size:1.1rem;margin-bottom:0.1rem}
.yao-option .opt-label{font-size:0.68rem;opacity:0.7}
.yao-preview{display:flex;flex-direction:column;align-items:center;gap:0.15rem;margin-bottom:1.5rem;min-height:50px}
.yao-preview .pv-line{font-size:1.4rem;color:var(--text-dim);letter-spacing:0.15em;transition:color 0.3s}
.yao-preview .pv-line.moving{color:#C49A5F;text-shadow:0 0 8px rgba(196,154,95,0.15)}
.manual-actions{display:flex;gap:1rem;justify-content:center;align-items:center}

.btn-back{display:block;margin:1rem auto 0;padding:0.6rem 1.8rem;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text-dim);font-size:0.85rem;cursor:pointer;transition:all 0.3s}
.btn-back:hover{border-color:var(--accent);color:var(--accent)}

.share-btn{padding:.5rem 1.6rem;background:transparent;border:1px solid rgba(196,154,95,0.18);border-radius:8px;color:rgba(139,115,85,0.55);font-size:.82rem;cursor:pointer;letter-spacing:.06em;transition:all .3s}
.share-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(196,154,95,0.04)}

.hidden{display:none}

/* ═══════════════════════════════════════════ */
/*  追问区 — 聊天气泡 + 微型日晷                    */
/* ═══════════════════════════════════════════ */
#chat-history{display:flex;flex-direction:column;gap:0.5rem;min-height:50px;max-height:400px;overflow-y:auto;margin-bottom:0.6rem}
#chat-history::-webkit-scrollbar{width:3px}
#chat-history::-webkit-scrollbar-thumb{background:rgba(196,154,95,0.15);border-radius:2px}

.chat-bubble{max-width:85%;padding:0.55rem 0.8rem;border-radius:10px;font-size:0.82rem;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.chat-bubble.user{align-self:flex-end;background:rgba(196,154,95,0.1);border:1px solid rgba(196,154,95,0.18);color:#5a4a38}
.chat-bubble.assistant{align-self:flex-start;background:rgba(247,243,232,0.55);border:1px solid rgba(196,154,95,0.12);color:#4a4540}
.chat-bubble.streaming{border-color:rgba(196,154,95,0.15);box-shadow:0 0 6px rgba(196,154,95,0.06)}

.chat-input-row{display:flex;gap:0.5rem;align-items:flex-end;margin-top:0.5rem}
.chat-input-row textarea{flex:1;padding:0.55rem 0.7rem;border:1px solid var(--glass-border);border-radius:10px;background:rgba(255,255,255,0.35);color:var(--text);font-size:0.85rem;resize:none;outline:none;font-family:inherit;transition:border-color 0.25s}
.chat-input-row textarea:focus{border-color:var(--accent)}
.chat-input-row textarea:disabled{opacity:0.4}
.chat-input-row button{padding:0.55rem 1rem;border:none;border-radius:10px;background:var(--accent);color:#fff;font-size:0.85rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:opacity 0.25s}
.chat-input-row button:disabled{opacity:0.45;cursor:default}

/* 追问等待 — 微型日晷 */
#followup-loader{display:flex;align-items:center;gap:0.5rem;padding:0.2rem 0}
#followup-loader.hidden{display:none!important}
.fu-sundial{position:relative;width:60px;height:60px;flex-shrink:0}
/* 外环 — 带刻度齿 */
.fu-ring.outer{
  width:56px;height:56px;margin:-28px 0 0 -28px;
  border-width:1px;border-color:rgba(166,130,69,0.2);
  border-style:dashed;
}
/* 地支刻度点 — 12个 */
.fu-ring.mid{
  width:44px;height:44px;margin:-22px 0 0 -22px;
  border-width:0.8px;border-color:rgba(166,130,69,0.14);
}
/* 内圈 */
.fu-ring.inner{
  width:30px;height:30px;margin:-15px 0 0 -15px;
  border-width:0.6px;border-color:rgba(139,115,85,0.1);
  border-style:dotted;
}
/* 核心 ☯️-like dot */
.fu-ring.core{
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  background:rgba(166,130,69,0.35);border:none;border-radius:50%;
  box-shadow:0 0 6px rgba(166,130,69,0.15);
}
/* 十二地支字符 */
.fu-dizhi{
  position:absolute;top:50%;left:50%;width:56px;height:56px;
  margin:-28px 0 0 -28px;
  pointer-events:none;
}
.fu-dz{
  position:absolute;left:50%;
  font-family:"Noto Serif SC",serif;font-size:0.55rem;font-weight:600;
  color:rgba(122,92,53,0.5);
  transform-origin:0 28px;
}
.fu-text{font-size:0.72rem;color:rgba(105,105,105,0.45);letter-spacing:0.08em;white-space:nowrap}

/* 追问状态行 */
.chat-status{margin-top:0.4rem;font-size:0.72rem;color:var(--text-dim);opacity:0.55;text-align:center;letter-spacing:0.04em}
.chat-status.finished{color:#8a6d40;opacity:0.7;font-style:italic}

/* ═══ 汉堡菜单 — 统一版本（单一定义，免冲突）═══ */
.hb-btn{position:fixed;top:16px;left:16px;z-index:10001;width:38px;height:38px;background:rgba(247,243,232,0.92);border:1px solid rgba(180,160,120,0.2);border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.hb-btn span{display:block;width:20px;height:1.5px;background:rgba(120,100,70,0.4);transition:all .35s}
.hb-btn:hover span{background:#8b7355}
.hb-btn.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hb-btn.active span:nth-child(2){opacity:0}
.hb-btn.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.hb-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.2)}
.hb-overlay.hidden{display:none}
.hb-drawer{position:fixed;top:0;left:0;z-index:9999;width:250px;height:100vh;background:rgba(247,243,232,0.97);border-right:1px solid rgba(180,160,120,0.15);transform:translateX(-100%);display:flex;flex-direction:column;padding:4rem 1.3rem 2rem;gap:2px;overflow-y:auto}
.hb-close{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:6px;background:rgba(180,160,120,0.1);border:1px solid rgba(180,160,120,0.3);color:rgba(140,120,80,0.7);font-size:.85rem;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hb-close:hover{background:rgba(180,160,120,0.2);color:#5a3e2b}
.hb-item{background:transparent;border:none;color:rgba(100,80,55,0.65);font-size:.88rem;padding:.6rem .5rem;text-align:left;cursor:pointer;letter-spacing:.05em;border-radius:6px;font-weight:500}
.hb-item:hover{color:#5a3e2b;background:rgba(180,160,120,0.08)}
.content-view{position:fixed;inset:0;z-index:100;background:#f7f3e8;overflow-y:auto;display:flex;flex-direction:column}
.content-view.hidden{display:none}
.content-view-inner{max-width:720px;margin:0 auto;padding:3rem 1.5rem 5rem;width:100%;color:#3a3025}
.content-back{display:inline-flex;align-items:center;gap:.3rem;background:transparent;border:1px solid rgba(180,160,120,0.3);color:#8b7355;font-size:.82rem;padding:.4rem 1rem;border-radius:8px;cursor:pointer;margin-bottom:2.5rem}
.content-back:hover{border-color:#5a3e2b;color:#5a3e2b}
.disclaimer-overlay{position:fixed;inset:0;background:rgba(247,243,232,0.95);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;pointer-events:none}
.disclaimer-overlay.hidden{display:none}
.disclaimer-modal{background:#f7f3e8;border:1px solid rgba(180,160,120,0.2);pointer-events:auto;border-radius:12px;max-width:460px;width:100%;height:75vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,0.1)}
.disclaimer-modal #disclaimer-body{flex:1;overflow-y:auto;padding:24px 28px;font-size:.88rem;line-height:1.7;color:#3a3025}
.disclaimer-footer{padding:16px 28px 24px;border-top:1px solid rgba(180,160,120,0.15);text-align:center;flex-shrink:0}
.disclaimer-agree-btn{padding:12px 48px;border:1px solid rgba(160,140,100,0.5);background:rgba(180,160,120,0.12);color:rgba(160,140,100,0.3);border-radius:8px;font-size:.9rem;cursor:pointer;transition:all .3s}
.disclaimer-agree-btn:disabled{opacity:.3;cursor:not-allowed}
.disclaimer-agree-btn:not(:disabled){background:rgba(180,160,120,0.25);color:#5a3e2b;cursor:pointer}
.disclaimer-agree-btn:not(:disabled):hover{background:rgba(180,160,120,0.35)}
.disclaimer-modal #disclaimer-body::-webkit-scrollbar{width:4px}
.disclaimer-modal #disclaimer-body::-webkit-scrollbar-thumb{background:rgba(180,160,120,0.2);border-radius:2px}
.disclaimer-modal #disclaimer-body::-webkit-scrollbar-track{background:transparent}
.lang-btn{border:1px solid rgba(180,160,120,0.2);color:#8b7355;background:transparent;border-radius:6px;padding:.4rem 1rem;font-size:.82rem;cursor:pointer}
.lang-btn:hover{border-color:#5a3e2b;color:#5a3e2b}
#privacy-footer-text{color:rgba(140,120,90,0.6)}
.login-overlay{position:fixed;inset:0;background:rgba(247,243,232,0.95);z-index:10001;display:flex;align-items:center;justify-content:center;padding:20px}
.login-overlay.hidden{display:none}
.login-modal{position:relative;background:#f7f3e8;border:1px solid rgba(180,160,120,0.2);border-radius:12px;max-width:400px;width:100%;padding:2rem;box-shadow:0 0 60px rgba(0,0,0,0.1)}

/* ═══ 档案弹窗 ═══ */
.auth-overlay{position:fixed;inset:0;background:rgba(247,243,232,0.95);z-index:10001;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-overlay.hidden{display:none}
.auth-modal{background:#f7f3e8;border:1px solid rgba(180,160,120,0.2);border-radius:12px;max-width:440px;width:100%;max-height:85vh;overflow-y:auto;padding:1.5rem;box-shadow:0 0 60px rgba(0,0,0,0.1);position:relative}
.auth-modal-close{position:absolute;top:.6rem;right:.7rem;width:26px;height:26px;border-radius:6px;background:rgba(180,160,120,0.08);border:1px solid rgba(180,160,120,0.2);color:rgba(140,120,80,0.6);font-size:.75rem;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1}
.auth-modal-close:hover{background:rgba(180,160,120,0.16);color:#5a3e2b}
@media(max-width:600px){.auth-modal{max-width:95vw;padding:1rem}.auth-modal-close{top:.4rem;right:.5rem}}
.auth-title{font-size:1.15rem;color:#5a3e2b;letter-spacing:.06em;margin-bottom:1.2rem;text-align:center;font-weight:700}
.auth-submit{display:block;width:100%;margin-top:1rem;padding:.7rem;background:rgba(196,154,95,0.12);border:1px solid rgba(196,154,95,0.35);border-radius:10px;color:#5a3e2b;font-size:.88rem;font-weight:600;cursor:pointer;letter-spacing:.05em;transition:all .25s}
.auth-submit:hover{background:rgba(196,154,95,0.22);border-color:rgba(196,154,95,0.55);color:#3a2520}
.auth-links{display:flex;justify-content:space-between;margin-top:.7rem}
.auth-link{background:none;border:none;color:rgba(139,115,85,0.5);font-size:.75rem;cursor:pointer;padding:.3rem 0;transition:color .2s}
.auth-link:hover{color:#5a3e2b}

/* ═══ 右上角登录按钮 ═══ */
.top-login-btn{position:fixed;top:16px;right:calc(50% - 360px);z-index:1001;padding:.5rem 1rem;background:rgba(247,243,232,0.9);border:1px solid rgba(180,160,120,0.25);border-radius:8px;color:rgba(100,80,55,0.7);font-size:.82rem;cursor:pointer;letter-spacing:.04em;font-weight:500;transition:all .25s}
.top-login-btn:hover{border-color:#8b7355;color:#5a3e2b;background:rgba(247,243,232,1)}
.top-login-btn.logged-in{color:#5a3e2b;border-color:rgba(180,160,120,0.35)}
.admin-only.hidden{display:none!important}

/* ═══ 排盘结果卡片 ═══ */
.ark-card{background:transparent;border-radius:12px;padding:0;margin-bottom:1rem}
.ark-card-header{margin-bottom:.6rem}
.ark-card-title{font-size:.88rem;font-weight:600;color:rgba(100,80,55,0.5);letter-spacing:.06em}
.ark-placeholder{color:rgba(100,80,55,0.3);text-align:center;padding:1rem;font-size:.85rem}
.result-section{padding:1rem 0}

/* ═══════════════════════════════════════════ */
/*  响应式 — 平板 ≤800px                       */
/* ═══════════════════════════════════════════ */
@media(max-width:800px){
  h1{font-size:1.6rem}.landing-title{font-size:2.2rem}.subtitle{font-size:.78rem}
  #main-wrapper{padding:1.5rem 1rem 12rem}
  #app{padding:1.5rem 1rem calc(3rem + env(safe-area-inset-bottom,0px))}
  .top-login-btn{right:16px;font-size:.76rem;padding:.4rem .8rem;background:rgba(196,154,95,0.18);border-color:rgba(196,154,95,0.5)}
  .mode-switch .style-group{flex-wrap:wrap}
  .style-section,.tone-section{gap:.4rem}
  .style-group,.tone-group{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .style-group::-webkit-scrollbar,.tone-group::-webkit-scrollbar{display:none}
  .style-btn,.tone-btn{font-size:.74rem;padding:.3rem .6rem;flex-shrink:0}
  #question{font-size:.9rem;padding:.65rem .8rem}
  .coin{width:48px;height:48px;font-size:1.1rem}.cast-coins{gap:.6rem}
  .yao-picker-list{max-width:100%}
  .pan-grid{font-size:.72rem}.pg-h{font-size:.68rem}.pg-c{font-size:.7rem;padding:.2rem 0}
  .pan-meta p{font-size:.74rem}.pan-hexname{font-size:1.15rem}
  .ark-card-title{font-size:.8rem}
  #chat-input{font-size:.82rem}#chat-send{font-size:.82rem;padding:.5rem 1rem}
  .chat-bubble{max-width:92%;font-size:0.78rem}
  .dual{flex-direction:column;gap:1.5rem}.dual-col{min-width:auto}
  .portals{gap:1rem}.portal-card{padding:1.5rem 1.2rem;min-width:160px}
  .landing-section p{font-size:.84rem;line-height:1.85}
}

/* ═══════════════════════════════════════════ */
/*  响应式 — 手机 ≤600px                       */
/* ═══════════════════════════════════════════ */
@media(max-width:600px){
  h1{font-size:1.35rem}.landing-title{font-size:1.7rem}.subtitle{font-size:.72rem}
  #main-wrapper{padding:1rem .8rem 10rem}
  #app{padding:1rem .8rem calc(2.5rem + env(safe-area-inset-bottom,0px))}
  .hb-btn{top:10px;left:10px;width:34px;height:34px}
  .top-login-btn{top:10px;right:10px;font-size:.7rem;padding:.3rem .7rem;background:rgba(196,154,95,0.22);border-color:rgba(196,154,95,0.55)}
  .mode-switch .style-group{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:.3rem;scrollbar-width:none}
  .mode-switch .style-group::-webkit-scrollbar{display:none}
  .mode-switch .style-btn{font-size:.72rem;padding:.35rem .4rem;text-align:center;border-radius:12px;min-height:44px}
  .style-label,.tone-label{font-size:.76rem}
  .style-group,.tone-group{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .style-group::-webkit-scrollbar,.tone-group::-webkit-scrollbar{display:none}
  .style-btn,.tone-btn{font-size:.7rem;padding:.35rem .6rem;border-radius:12px;flex-shrink:0;min-height:44px}
  #question{font-size:16px;padding:.55rem .7rem;border-radius:10px}
  .intent-block{padding:1rem .8rem;border-radius:12px}
  .num-input{width:5rem!important;font-size:16px;padding:.45rem .5rem!important}
  .coin{width:40px;height:40px;font-size:1rem}.cast-coins{gap:.5rem}
  .btn-toss{padding:.55rem 1.5rem;font-size:.88rem}
  .yao-picker-list{gap:.3rem}.yao-option{padding:.3rem .4rem;font-size:.74rem}
  .yao-picker-row{gap:.25rem}.row-label{font-size:.7rem;min-width:2.2rem}
  .result-section{padding:.8rem 0;gap:.8rem}
  .chat-section{margin-top:.8rem!important}
  #chat-history{max-height:min(400px,35vh)}
  .chat-bubble{max-width:95%;font-size:0.74rem;padding:0.45rem 0.6rem}
  #chat-input{font-size:16px;padding:.4rem .6rem}
  #chat-send{font-size:.76rem;padding:.4rem .8rem;flex-shrink:0}
  .chat-input-row{padding-bottom:env(safe-area-inset-bottom,0px)}
  .fu-sundial{width:46px;height:46px}
  .fu-ring.outer{width:42px;height:42px;margin:-21px 0 0 -21px}
  .fu-ring.mid{width:34px;height:34px;margin:-17px 0 0 -17px}
  .fu-ring.inner{width:24px;height:24px;margin:-12px 0 0 -12px}
  .fu-dizhi{width:42px;height:42px;margin:-21px 0 0 -21px}
  .fu-dz{font-size:0.48rem;transform-origin:0 21px}
  .btn-back{font-size:.82rem;padding:.5rem 1.2rem}
  .disclaimer-modal{max-width:95vw;height:80vh}
  .login-modal{max-width:92vw;padding:1.5rem}
  .dual-col p{font-size:.8rem;line-height:1.8}
  .portal-card{padding:1.2rem 1rem;min-width:140px;border-radius:12px}
  .portal-title{font-size:1rem}.portal-desc{font-size:.74rem}
  .landing-section p{font-size:.78rem}
  .landing-tagline{font-size:.7rem}
}

/* Toast (warm jade) */
.toast{position:fixed;bottom:calc(2rem + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(20px);background:rgba(58,48,37,0.95);border:1px solid rgba(196,154,95,0.3);color:rgba(247,243,232,0.9);padding:.7rem 1.4rem;border-radius:10px;font-size:.85rem;pointer-events:none;opacity:0;transition:opacity .35s,transform .35s;z-index:10001;max-width:90vw;text-align:center;letter-spacing:.03em}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:600px){.toast{bottom:calc(5rem + env(safe-area-inset-bottom,0px));font-size:.78rem;padding:.5rem 1rem}}

/* 起卦时间选择器 */
.datetime-block{display:flex;flex-direction:column;gap:.35rem;padding:.6rem .8rem .4rem}
.datetime-label{font-size:.75rem;color:var(--text-dim);letter-spacing:.04em;opacity:.75}
.datetime-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.datetime-input{flex:1;min-width:160px;padding:.5rem .7rem;border:1px solid rgba(196,154,95,0.18);border-radius:10px;background:rgba(255,255,255,0.35);color:var(--text);font-size:.8rem;outline:none;transition:border-color .25s;font-family:inherit}
.datetime-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(196,154,95,0.08)}
.datetime-input::-webkit-calendar-picker-indicator{filter:invert(.55) sepia(.3) saturate(3) hue-rotate(5deg);cursor:pointer;opacity:.7}
.datetime-btn{padding:.45rem .75rem;border-radius:9px;font-size:.76rem;cursor:pointer;transition:all .2s;font-family:inherit;letter-spacing:.03em}
.datetime-btn.now{border:1px solid rgba(196,154,95,0.25);background:rgba(196,154,95,0.08);color:var(--accent-soft)}
.datetime-btn.now:hover{background:rgba(196,154,95,0.16);border-color:var(--accent)}
.datetime-btn.clear{border:1px solid transparent;background:transparent;color:var(--text-dim);opacity:.6}
.datetime-btn.clear:hover{opacity:1;color:var(--text)}
.datetime-hint{font-size:.68rem;color:var(--text-dim);opacity:.5;letter-spacing:.02em}
@media(max-width:600px){.datetime-input{min-width:130px;font-size:.76rem}.datetime-btn{font-size:.72rem;padding:.4rem .6rem}}

/* 档案仪 loading spinner */
@keyframes liuyao-archive-spin{to{transform:rotate(360deg)}}

/* 时空档案仪 — 滑动条（知几暖玉暗金） */
.liuyao-archive-items::-webkit-scrollbar{width:5px}
.liuyao-archive-items::-webkit-scrollbar-track{background:transparent;margin:4px 0}
.liuyao-archive-items::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(196,154,95,0.12),rgba(196,154,95,0.25),rgba(196,154,95,0.12));border-radius:3px}
.liuyao-archive-items::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(196,154,95,0.25),rgba(196,154,95,0.4),rgba(196,154,95,0.25))}
.liuyao-archive-items{scrollbar-width:thin;scrollbar-color:rgba(196,154,95,0.2) transparent}
/* reduced-motion: disable only explicit UI transitions, leave background animations (sundial, dust) alone */
@media (prefers-reduced-motion:reduce){.chat-bubble,.auth-modal,.content-view,.hb-drawer,.style-btn,.quantum-btn{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}