:root{
  --paper:#f5ead4;
  --paper-soft:#fbf5e8;
  --paper-deep:#dcc393;
  --ink:#443321;
  --ink-soft:#75614c;
  --line:rgba(100,71,33,.12);
  --accent:#7b542d;
  --accent-strong:#5f3d1d;
  --teal:#0f6a73;
  --gold:#b7862d;
  --red:#9a4931;
  --shadow:0 18px 48px rgba(84,60,29,.12);
  --radius:28px;
  --font-display:"STKaiti","Kaiti SC","KaiTi","Songti SC",serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Serif SC",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:var(--font-body);
  background:
    radial-gradient(circle at top left, rgba(180,139,77,.14), transparent 28%),
    radial-gradient(circle at right bottom, rgba(122,79,35,.10), transparent 22%),
    linear-gradient(180deg,#f8f0dc 0%,#efe1bc 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(120,89,48,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,89,48,.04) 1px,transparent 1px);
  background-size:24px 24px;
  opacity:.28;
}
button,input,textarea,select{font:inherit}
.app-shell,.admin-shell{
  width:min(100%,640px);
  margin:0 auto;
  padding:18px 16px 104px;
}
.paper-hero,.admin-hero{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:24px 20px;
  border-radius:36px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.4), transparent 28%),
    linear-gradient(135deg,#ead7a3,#f6edd6 50%,#e7d19d 100%);
  border:1px solid rgba(103,70,31,.16);
  box-shadow:var(--shadow);
}
h1,h2,h3,h4{font-family:var(--font-display)}
h1{margin:0;font-size:36px;line-height:1.1}
h2{margin:0;font-size:28px}
h3{margin:0;font-size:24px}
.paper-link{
  align-self:flex-start;
  border:none;
  background:rgba(255,255,255,.44);
  color:var(--accent-strong);
  border-radius:18px;
  padding:12px 16px;
  text-decoration:none;
  cursor:pointer;
}
.paper-link.small{padding:0;background:none}
.paper-card,.admin-login-card,.admin-card{
  margin-top:16px;
  padding:20px 18px;
  border-radius:var(--radius);
  background:rgba(250,244,229,.88);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}
.section-head,.profile-head,.history-head,.module-admin-head,.module-detail-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.ink-badge,.step-pill,.small-chip,.fortune-tag{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:13px;
}
.ink-badge{
  background:#e5d2a8;
  color:var(--accent-strong);
}
.almanac-grid{display:grid;gap:16px;margin-top:16px}
.almanac-main{
  display:grid;
  grid-template-columns:108px 1fr;
  gap:14px;
  align-items:center;
  padding:16px;
  border-radius:24px;
  background:linear-gradient(135deg,#f8edd0,#e8d4a2);
}
.calendar-number{
  display:grid;
  place-items:center;
  width:108px;
  height:108px;
  border-radius:24px;
  background:rgba(255,255,255,.38);
  font:700 48px/1 var(--font-display);
  color:var(--accent-strong);
}
.calendar-meta p{margin:0 0 8px;line-height:1.6}
.almanac-sides{display:grid;gap:12px}
.fortune-card{
  padding:14px;
  border-radius:22px;
  background:#fffaf0;
  border:1px solid rgba(104,73,33,.12);
}
.fortune-card.muted{background:#f7e9d6}
.fortune-card h3,.admin-card h2,.admin-login-card h2{margin:0 0 10px;font-size:20px}
.fortune-tags,.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.fortune-tag,.small-chip{
  background:#efe1bc;
  color:var(--accent-strong);
  border:1px solid rgba(104,73,33,.1);
}
.modules-card{scroll-margin-top:14px}
.module-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.module-icon-card{
  border:none;
  cursor:pointer;
  min-height:132px;
  padding:16px 10px 14px;
  border-radius:24px;
  display:grid;
  gap:10px;
  place-items:center;
  color:#fffdf7;
  box-shadow:var(--shadow);
}
.module-icon-card.tone-wind{background:linear-gradient(160deg,#276f73,#0d2c34)}
.module-icon-card.tone-plum{background:linear-gradient(160deg,#8f5748,#44211d)}
.module-icon-card.tone-sand{background:linear-gradient(160deg,#7c6530,#403624)}
.module-icon-card.tone-gold{background:linear-gradient(160deg,#c08e2a,#5a3b0b)}
.module-icon-card.tone-violet{background:linear-gradient(160deg,#5c5779,#241f43)}
.module-icon-glyph{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:22px;
  background:rgba(255,255,255,.14);
  font-size:30px;
  border:1px solid rgba(255,255,255,.18);
}
.module-icon-label{font-size:15px;letter-spacing:.04em}
.module-stage{margin-top:16px}
.hub-intro-card,.module-detail-page{
  padding:18px;
  border-radius:26px;
  background:#fff9ee;
  border:1px solid rgba(104,73,33,.12);
}
.hub-intro-card strong{display:block;font-size:18px}
.hub-intro-card p{margin:8px 0 0;color:var(--ink-soft)}
.module-detail-head{margin-bottom:14px}
.back-link{color:var(--accent)}
.stack-gap{display:grid;gap:14px}
.detail-grid{
  display:grid;
  gap:12px;
}
.detail-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.result-detail-shell{
  display:grid;
  gap:12px;
  margin-top:16px;
  padding:16px;
  border-radius:24px;
  background:linear-gradient(180deg,#fffaf0,#f4e5c2);
  border:1px solid rgba(104,73,33,.12);
}
.result-detail-head h4{margin:0 0 8px;font-size:22px}
.result-detail-head p{margin:0;color:var(--ink-soft);line-height:1.7}
.result-detail-body{display:grid;gap:12px}
.step-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.step-pill{
  background:rgba(123,84,45,.08);
  color:var(--accent-strong);
  border:1px solid rgba(123,84,45,.12);
}
.status-band{
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(19,101,104,.12),rgba(183,134,45,.12));
  color:var(--accent-strong);
}
.segmented{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.segmented-btn{
  border:none;
  min-height:40px;
  padding:0 16px;
  border-radius:16px;
  background:#eee1be;
  color:var(--ink-soft);
  cursor:pointer;
}
.segmented-btn.active{background:#7a4d28;color:#fff7eb}
.paper-form{display:grid;gap:12px}
.paper-input,.paper-textarea,.paper-select,.table-input,.table-textarea,.table-select{
  width:100%;
  border:1px solid rgba(104,73,33,.16);
  border-radius:18px;
  background:#fffaf0;
  color:var(--ink);
}
.paper-input,.paper-select{min-height:48px;padding:0 14px}
.paper-textarea{min-height:96px;padding:14px;resize:vertical}
.paper-button{
  appearance:none;
  border:none;
  cursor:pointer;
  min-height:48px;
  padding:0 16px;
  border-radius:18px;
  background:#7a4d28;
  color:#fff8ee;
}
.paper-button.secondary{background:#e5d2a8;color:var(--accent-strong)}
.mini-tip{margin:10px 0 0;color:var(--ink-soft);line-height:1.6}
.auth-tabs{display:flex;gap:8px;margin-bottom:12px}
.mini-tab{
  border:none;
  min-height:38px;
  padding:0 14px;
  border-radius:14px;
  background:#eee1be;
  color:var(--ink-soft);
}
.mini-tab.active{background:#7a4d28;color:#fff7eb}
.auth-form{display:none}
.auth-form.active{display:grid}
.bottom-nav{
  position:fixed;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  width:min(100% - 24px,560px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:10px;
  border-radius:24px;
  background:rgba(247,236,210,.94);
  border:1px solid rgba(104,73,33,.12);
  box-shadow:var(--shadow);
  z-index:20;
}
.bottom-item{
  border:none;
  min-height:48px;
  border-radius:18px;
  background:transparent;
  color:var(--ink-soft);
}
.bottom-item.active{background:#7a4d28;color:#fff8ee}
.tool-card{
  padding:16px;
  border-radius:24px;
  background:#fff9ee;
  border:1px solid rgba(104,73,33,.12);
}
.tool-grid,.result-grid,.stats-grid,.admin-grid{
  display:grid;
  gap:12px;
}
.tool-grid.two,.result-grid.two,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.tool-grid.three,.birth-region-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.result-box{
  padding:14px;
  border-radius:20px;
  background:#f0e1bc;
}
.result-box h4{margin:0 0 8px;font-size:18px}
.result-box p{margin:0;line-height:1.7}
.liuyao-layout{
  display:grid;
  gap:12px;
}
.liuyao-meta-box{
  background:linear-gradient(180deg,#f6ead1,#eedcb7);
}
.liuyao-meta-grid{
  display:grid;
  gap:6px;
}
.liuyao-meta-grid strong{
  color:#0d84cf;
}
.liuyao-chart-box{
  background:linear-gradient(180deg,#f8edd3,#efe0bb);
}
.liuyao-chart-head{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px dashed rgba(104,73,33,.18);
  margin-bottom:12px;
}
.liuyao-chart-head h4{
  margin:0;
  color:#b92823;
  font-size:28px;
}
.liuyao-chart-head p{
  color:#196fca;
}
.liuyao-chart-rows{
  display:grid;
  gap:10px;
}
.liuyao-chart-row{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 28px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.liuyao-spirit{
  font:700 18px/1.2 var(--font-display);
  text-align:right;
}
.liuyao-side{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.liuyao-glyph{
  display:inline-flex;
  align-items:center;
  min-width:58px;
  gap:8px;
}
.liuyao-glyph i{
  display:block;
  height:10px;
  border-radius:999px;
  background:#111;
  flex:1;
}
.liuyao-glyph.yang i{
  width:58px;
  flex:none;
}
.liuyao-text{
  font-size:16px;
  color:#0e8a3b;
  word-break:break-all;
}
.liuyao-text.mark-hit{
  color:#0a8b31;
}
.liuyao-move{
  text-align:center;
  color:#da3129;
  font:700 26px/1 var(--font-display);
}
.liuyao-prose{
  display:grid;
  gap:12px;
  font-size:17px;
  line-height:1.9;
}
.liuyao-prose h4{
  margin:0;
  color:#c62d22;
  font-size:22px;
}
.liuyao-prose p strong{
  color:#b92823;
}
.span-two{grid-column:1/-1}
.line-stack{display:grid;gap:10px}
.line-item{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:18px;
  background:#f8edd4;
}
.yao-bar{height:12px;border-radius:999px;background:#7a4d28}
.yao-bar.yin{
  background:linear-gradient(90deg,#7a4d28 0 42%,transparent 42% 58%,#7a4d28 58% 100%);
}
.check-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:48px;
}
.birth-workbench{
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:22px;
  background:#fdf7ed;
  border:1px solid rgba(104,73,33,.08);
}
.birth-status{font-size:13px;line-height:1.6}
.palace-grid{margin-top:4px}
.tab-segment{margin-bottom:10px}
.tab-panel{display:block}
.wuxing-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.wuxing-badge{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  color:#fffdf7;
  font-size:13px;
}
.wuxing-fire{background:#c84532}
.wuxing-metal{background:#dbad1f;color:#4e3400}
.wuxing-water{background:#2c72bf}
.wuxing-wood{background:#3f8f45}
.wuxing-earth{background:#b88a42;color:#3d2600}
.ratio-board{
  display:grid;
  gap:10px;
}
.ratio-row{
  display:grid;
  grid-template-columns:32px 1fr 44px;
  gap:10px;
  align-items:center;
}
.ratio-track{
  height:12px;
  border-radius:999px;
  background:rgba(104,73,33,.12);
  overflow:hidden;
}
.ratio-fill{
  display:block;
  height:100%;
  border-radius:999px;
}
.ziwei-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.ziwei-palace{
  border:1px solid rgba(104,73,33,.16);
  background:#fffaf0;
  color:var(--ink);
  border-radius:18px;
  min-height:108px;
  padding:10px;
  display:grid;
  align-content:start;
  gap:6px;
  text-align:left;
}
.ziwei-palace strong{font-size:16px}
.ziwei-palace small{color:var(--ink-soft);line-height:1.5}
.ziwei-palace.related{
  background:linear-gradient(180deg,#efe0bc,#e9d4aa);
}
.ziwei-palace.active{
  border-color:#7a4d28;
  box-shadow:0 10px 24px rgba(90,59,11,.14);
}
.history-list{display:grid;gap:10px;margin-top:12px}
.history-item{
  padding:12px;
  border-radius:18px;
  background:#fff7ea;
  border:1px solid rgba(104,73,33,.08);
}
.profile-head strong{font-size:22px}
.profile-head p{margin:4px 0 0;color:var(--ink-soft)}
.admin-body{background:linear-gradient(180deg,#f4ead0 0%,#e8d6ac 100%)}
.admin-grid{grid-template-columns:1fr}
.admin-span{grid-column:1/-1}
.stat-pill{
  padding:14px;
  border-radius:18px;
  background:#fff7ea;
  border:1px solid rgba(104,73,33,.08);
}
.stat-pill strong{display:block;font-size:24px;margin-bottom:4px}
.module-admin-form{
  display:grid;
  gap:10px;
  padding:12px 0;
  border-top:1px dashed rgba(104,73,33,.12);
}
.module-admin-form:first-child{border-top:none;padding-top:0}
.switch{display:inline-flex;gap:6px;align-items:center}
.table-wrap{overflow:auto}
.paper-table{width:100%;border-collapse:collapse;font-size:13px}
.paper-table th,.paper-table td{
  padding:10px 8px;
  border-bottom:1px solid rgba(104,73,33,.08);
  text-align:left;
  vertical-align:top;
}
.admin-subsection{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(104,73,33,.12)}
.admin-subsection h3{margin:0 0 10px;font-size:18px}
.trend-list{display:grid;gap:8px}
.trend-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  background:#fff7ea;
  border:1px solid rgba(104,73,33,.08);
}
.table-input,.table-textarea,.table-select{
  background:#fffdf7;
  color:var(--ink);
  padding:8px 10px;
  border-radius:12px;
}
.table-textarea{margin-top:8px;resize:vertical}
.table-select{min-height:38px}
.small-button{
  min-height:38px;
  padding:0 12px;
  border-radius:12px;
  white-space:nowrap;
}
.coin-modal{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  padding:20px;
  background:rgba(26,18,8,.42);
  backdrop-filter:blur(6px);
  z-index:40;
}
.coin-modal.open{display:grid}
.coin-modal-card{
  width:min(100%,420px);
  padding:20px;
  border-radius:30px;
  background:linear-gradient(180deg,#1c3d43,#10262b);
  color:#f7edd9;
  box-shadow:0 30px 60px rgba(0,0,0,.32);
}
.coin-modal-title{font:700 26px/1.2 var(--font-display)}
.coin-modal-tip{margin-top:12px;color:rgba(247,237,217,.72);line-height:1.6}
.coin-cloud{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.coin-shell{
  display:grid;
  justify-items:center;
  gap:8px;
  padding:12px 8px;
  border-radius:20px;
  background:rgba(255,255,255,.06);
  animation:coin-drop 1.2s cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay:var(--coin-delay,0s);
}
.coin-token{
  position:relative;
  width:72px;
  height:72px;
  border-radius:50%;
  transform-style:preserve-3d;
  animation:coin-spin 1.18s cubic-bezier(.22,.88,.3,1) infinite;
}
.coin-face{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  backface-visibility:hidden;
  border:3px solid rgba(255,240,198,.4);
  box-shadow:inset 0 0 0 2px rgba(120,87,24,.36), 0 10px 18px rgba(0,0,0,.18);
}
.coin-face.front{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), transparent 18%),
    radial-gradient(circle at center, transparent 0 12px, rgba(116,82,24,.78) 12px 14px, transparent 14px),
    linear-gradient(135deg,#efd58c,#bf8b2e 52%,#7f5a17);
  color:#5a3500;
  font:700 13px/1.1 var(--font-display);
  letter-spacing:.12em;
}
.coin-face.back{
  transform:rotateY(180deg);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), transparent 18%),
    radial-gradient(circle at center, transparent 0 12px, rgba(116,82,24,.78) 12px 14px, transparent 14px),
    linear-gradient(135deg,#d4ba72,#a47320 54%,#65430e);
  color:#f6e3b0;
  font:700 18px/1 var(--font-display);
}
.coin-token.show-back{transform:rotateY(180deg)}
.coin-modal.revealed .coin-shell{animation-play-state:paused}
.coin-modal.revealed .coin-token{animation-play-state:paused}
.hidden{display:none!important}
@keyframes coin-spin{
  0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(-8deg)}
  50%{transform:rotateX(900deg) rotateY(540deg) rotateZ(6deg)}
  100%{transform:rotateX(1260deg) rotateY(1080deg) rotateZ(-2deg)}
}
@keyframes coin-drop{
  0%,100%{transform:translateY(0)}
  35%{transform:translateY(-18px)}
  70%{transform:translateY(8px)}
}
@media (max-width:560px){
  .app-shell,.admin-shell{padding-inline:12px}
  h1{font-size:32px}
  .paper-hero,.admin-hero{flex-direction:column}
  .almanac-main{grid-template-columns:1fr}
  .calendar-number{width:100%;height:92px}
  .module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-grid.two,.tool-grid.three,.result-grid.two,.stats-grid,.birth-region-grid,.coin-cloud,.detail-grid.two,.ziwei-grid{grid-template-columns:1fr}
  .line-item{grid-template-columns:46px 1fr}
  .line-item .small-chip{grid-column:1/-1}
  .liuyao-chart-head{grid-template-columns:1fr}
  .liuyao-chart-row{grid-template-columns:42px minmax(0,1fr) 24px minmax(0,1fr);gap:8px}
  .liuyao-spirit{font-size:15px}
  .liuyao-glyph{min-width:42px;gap:5px}
  .liuyao-glyph.yang i{width:42px}
  .liuyao-text{font-size:14px}
  .liuyao-prose{font-size:15px;line-height:1.8}
}