:root{
  --bg:#F6F1E6;
  --paper:#FFFDF8;
  --forest:#1F4D3D;
  --forest-soft:#4A6B5C;
  --sage:#D7E1D3;
  --ink:#2B2B26;
  --text-dim:#8A8577;
  --line:#D8D0BC;
  --line-strong:#1F4D3D;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Noto Sans SC','Noto Sans JP', sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
body{ display:flex; flex-direction:column; align-items:center; padding:56px 20px 90px; }

/* ===== Header actions (auth + language) ===== */
.header-actions{
  position:fixed; top:18px; right:18px; z-index:50;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.auth-bar{ display:flex; align-items:center; min-height:36px; }
.auth-google-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font-family:'Noto Sans SC','Noto Sans JP',sans-serif;
  font-size:0.78rem; font-weight:500; letter-spacing:0.02em;
  padding:7px 12px; cursor:pointer; transition:background 0.15s, border-color 0.15s;
}
.auth-google-btn:hover{ background:var(--sage); border-color:var(--forest-soft); }
.auth-google-icon{ display:flex; align-items:center; line-height:0; }
.auth-setup-hint{ font-size:0.72rem; color:var(--text-dim); }
.auth-user-avatar{ width:36px; height:36px; }
.sso-callback-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
}
.sso-callback-msg{ font-size:0.88rem; color:var(--forest-soft); letter-spacing:0.04em; }

/* ===== Language toggle ===== */
.lang-toggle{
  display:flex; gap:2px;
  background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:3px;
}
.lang-toggle button{
  background:transparent; color:var(--text-dim); border:none; border-radius:6px;
  padding:6px 12px; font-size:0.75rem; font-weight:500; letter-spacing:0.03em;
  cursor:pointer; transition:background 0.2s, color 0.2s;
}
.lang-toggle button.active{ background:var(--forest); color:#fff; }

/* ===== Brand header ===== */
.brand{ text-align:center; margin-bottom:34px; display:flex; flex-direction:column; align-items:center; }
.brand h1{
  font-family:'Noto Serif SC','Noto Serif JP', serif; font-weight:700; font-size:2.1rem;
  letter-spacing:0.4em; padding-left:0.4em; color:var(--forest);
}
.brand p{ margin-top:10px; font-size:0.8rem; letter-spacing:0.1em; color:var(--text-dim); }
.today-line{ margin-top:4px; font-size:0.72rem; letter-spacing:0.08em; color:var(--forest-soft); }

/* ===== Panel ===== */
.panel{
  width:100%; max-width:420px; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:30px 26px; box-shadow:0 4px 18px rgba(31,77,61,0.06);
}
.cat-prompt{ font-size:0.78rem; color:var(--text-dim); letter-spacing:0.04em; margin-bottom:14px; }

/* ===== Category tabs: larger text, no icons, minimal underline style ===== */
.cat-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.cat-btn{
  background:transparent; border:none; border-bottom:2px solid transparent; color:var(--text-dim);
  padding:10px 2px 12px; cursor:pointer; transition:all 0.15s;
  font-family:'Noto Sans SC','Noto Sans JP',sans-serif;
}
.cat-btn .cat-label{ font-size:0.92rem; font-weight:500; letter-spacing:0.02em; }
.cat-btn.active{ color:var(--forest); border-bottom-color:var(--forest); }
.cat-btn.active .cat-label{ font-weight:700; }
.cat-btn.locked{ opacity:0.55; }

/* ===== Info accordion ===== */
.info-toggle{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  background:transparent; border:none; color:var(--forest-soft);
  font-size:0.78rem; font-weight:500; padding:6px; margin-bottom:4px; cursor:pointer;
}
.info-toggle-arrow{ transition:transform 0.2s; display:inline-block; }
.info-toggle-arrow.open{ transform:rotate(180deg); }
.info-panel{
  max-height:0; overflow:hidden; transition:max-height 0.25s ease, margin 0.25s ease;
  background:var(--sage); border-radius:8px; margin-bottom:0;
}
.info-panel.open{ max-height:240px; margin-bottom:18px; }
.info-panel p{ font-size:0.78rem; line-height:1.8; color:var(--ink); padding:14px 16px; }

/* ===== Number inputs ===== */
.field-row{ display:flex; gap:12px; }
.field{ flex:1; }
.field label{ display:block; font-size:0.74rem; color:var(--text-dim); letter-spacing:0.05em; margin-bottom:6px; }
.field input{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  font-family:'Noto Sans SC','Noto Sans JP', sans-serif; font-size:1rem; padding:10px 12px;
  border-radius:8px; outline:none; transition:border-color 0.15s;
}
.field input:focus{ border-color:var(--forest); }

.cast-panel{ margin-bottom:4px; }
.cast-hint{ font-size:0.76rem; color:var(--text-dim); text-align:center; line-height:1.75; margin-top:12px; }

/* ===== Mode switch: clearly clickable secondary buttons ===== */
.mode-switch-btn{
  display:block; width:100%; text-align:center; background:var(--bg);
  border:1px solid var(--line); color:var(--forest); font-size:0.8rem; font-weight:500;
  padding:10px; margin:14px 0 18px; border-radius:8px; cursor:pointer; transition:background 0.15s, border-color 0.15s;
}
.mode-switch-btn:hover{ background:var(--sage); border-color:var(--forest-soft); }

/* ===== Draw button: smaller, calm ===== */
button{
  font-family:'Noto Sans SC','Noto Sans JP', sans-serif; cursor:pointer; border:1px solid var(--forest);
  border-radius:8px; padding:10px 16px; font-size:0.88rem; font-weight:500; letter-spacing:0.03em;
  transition:opacity 0.15s, background 0.15s;
}
.btn-primary{ background:var(--forest); color:#fff; }
.btn-primary:hover{ opacity:0.88; }
.btn-draw{ width:auto; min-width:140px; display:block; margin:4px auto 0; padding:10px 32px; border-radius:999px; font-size:0.92rem; }

/* ===== Result / hexagram card ===== */
.result{ width:100%; max-width:420px; margin-top:26px; display:none; }
.result.show{ display:block; animation:fadeUp 0.5s ease; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

.hexagram-card{
  background:var(--forest); border-radius:12px; padding:30px 24px 22px;
  display:flex; flex-direction:column; align-items:center;
}
.lines{ display:flex; flex-direction:column-reverse; gap:9px; margin-bottom:20px; }
.line{ width:110px; height:9px; display:flex; justify-content:space-between; opacity:0; transform:scaleX(0); transform-origin:center; }
.line.animate{ animation:drawLine 0.45s ease forwards; }
@keyframes drawLine{ from{ opacity:0; transform:scaleX(0); } to{ opacity:1; transform:scaleX(1); } }
.line .bar{ height:100%; background:var(--bg); border-radius:4px; }
.line.yang .bar{ width:100%; }
.line.yin .bar{ width:44%; }
.line.moving .bar{ background:#E8C97A; }
.gua-name{
  font-family:'Noto Serif SC','Noto Serif JP', serif; font-weight:700; font-size:1.55rem;
  letter-spacing:0.06em; color:#fff; margin-bottom:6px; text-align:center;
}
.gua-meta{ font-size:0.76rem; color:#fff; opacity:0.75; letter-spacing:0.02em; text-align:center; }

/* ===== Slip (reading card) ===== */
.slip{
  position:relative; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:10px;
  padding:32px 24px 24px; margin-top:18px; font-family:'Noto Serif SC','Noto Serif JP', serif;
  line-height:1.9; font-size:0.96rem; box-shadow:0 4px 18px rgba(31,77,61,0.06);
  transform:scale(0.94); opacity:0;
}
.slip.animate{ animation:stampIn 0.4s 0.5s ease forwards; }
@keyframes stampIn{ from{ transform:scale(0.94); opacity:0; } to{ transform:scale(1); opacity:1; } }
.seal-mark{
  position:absolute; top:-14px; right:16px; width:44px; height:44px; background:var(--forest); color:#fff;
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif SC','Noto Serif JP', serif; font-weight:700; font-size:0.85rem;
  letter-spacing:0.1em; writing-mode:vertical-rl;
}
.cat-tag{
  display:inline-block; font-size:0.66rem; font-weight:500; letter-spacing:0.05em; color:var(--forest);
  background:var(--sage); border-radius:6px; padding:3px 12px; margin-bottom:14px;
  font-family:'Noto Sans SC','Noto Sans JP',sans-serif;
}
.meaning-text{ color:var(--ink); }
.healing-spacer{ height:22px; }
.healing-text{ color:var(--forest); font-weight:500; font-size:0.94rem; border-top:1px solid var(--line); padding-top:16px; }

/* ===== Illustration slot ===== */
.illustration-slot{ margin-top:20px; }
.illustration-slot img{
  display:block; width:100%; border-radius:8px; border:1px solid var(--line);
}
.illustration-placeholder{
  border:1px dashed var(--line); border-radius:8px; padding:22px;
  text-align:center; color:var(--text-dim); font-size:0.76rem; letter-spacing:0.02em;
}
.illustration-placeholder span{ display:block; font-size:0.7rem; color:var(--text-dim); opacity:0.75; margin-top:6px; }

.disclaimer{ max-width:420px; margin-top:26px; font-size:0.7rem; color:var(--text-dim); text-align:center; line-height:1.7; }

/* ===== Paywall modal ===== */
.paywall-overlay{
  display:none; position:fixed; inset:0; background:rgba(43,43,38,0.5);
  align-items:center; justify-content:center; z-index:100; padding:20px;
}
.paywall-overlay.show{ display:flex; }
.paywall-modal{
  position:relative; width:100%; max-width:360px; background:var(--paper);
  border:1px solid var(--line); border-radius:12px; padding:32px 24px 26px;
  text-align:center; box-shadow:0 8px 28px rgba(0,0,0,0.15);
}
.paywall-close{
  position:absolute; top:10px; right:12px; background:transparent; color:var(--text-dim);
  border:none; font-size:1rem; padding:4px; line-height:1; cursor:pointer;
}
.paywall-close:hover{ color:var(--forest); }
.paywall-modal h2{
  font-family:'Noto Serif SC','Noto Serif JP', serif; font-size:1.1rem; color:var(--forest);
  margin-bottom:14px; letter-spacing:0.02em;
}
.paywall-modal p{ font-size:0.83rem; color:var(--text-dim); line-height:1.8; margin-bottom:22px; }
.paywall-kofi-btn{
  display:block; width:100%; text-decoration:none; text-align:center; margin-bottom:22px;
  box-sizing:border-box; background:var(--forest); color:#fff;
}
.paywall-divider{
  font-size:0.74rem; color:var(--text-dim); border-top:1px solid var(--line);
  padding-top:18px; margin-bottom:12px;
}
.paywall-input{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  font-family:'Noto Sans SC','Noto Sans JP', sans-serif; font-size:0.92rem; padding:10px 12px;
  border-radius:8px; outline:none; margin-bottom:12px; box-sizing:border-box; text-align:center;
}
.paywall-input:focus{ border-color:var(--forest); }
.paywall-unlock-btn{ width:100%; box-sizing:border-box; }
.paywall-error{ font-size:0.76rem; color:#B0553F; margin-top:10px; min-height:1em; }