/* FUGIU final visual layer. Business behavior stays in user.js; artwork is from the approved design. */
@font-face {
  font-family:"Source Han Serif CN";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/source-han-serif/SourceHanSerifCN-400.woff2") format("woff2");
}
@font-face {
  font-family:"Source Han Serif CN";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/assets/fonts/source-han-serif/SourceHanSerifCN-500.woff2") format("woff2");
}
@font-face {
  font-family:"Source Han Serif CN";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/assets/fonts/source-han-serif/SourceHanSerifCN-600.woff2") format("woff2");
}
@font-face {
  font-family:"Source Han Serif CN";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/assets/fonts/source-han-serif/SourceHanSerifCN-700.woff2") format("woff2");
}
:root {
  --ink:#25232a; --ink-dim:#6d706c; --ink-faint:#8c9188;
  --line:#d4d8d0; --line-soft:#e5e8e2; --line-control:#b8bcb4;
  --surface:#f7f8f4; --sage:#e5eadd; --page-max:960px;
  --font-serif:"Source Han Serif CN","Songti SC",serif;
  --radius-control:0; --radius-card:0; --gutter:20px;
}
html { background:#edf0e9; }
body { color:var(--ink); background:#edf0e9; }
.stage { overflow:clip; background:#f9faf7; box-shadow:0 0 48px #394b2b12; }
.brand { position:relative; z-index:20; height:calc(56px + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) 14px 0; background:#fff; border-bottom:1px solid #e2e5de; justify-content:center; }
.brand h1 { font:700 18px/1.2 var(--font-serif); letter-spacing:.025em; color:#241836; }
.brand-tools { position:absolute; inset:env(safe-area-inset-top,0px) 10px 0; display:flex; justify-content:space-between; pointer-events:none; }
.brand-tools .icon-button { pointer-events:auto; width:36px; height:36px; border-radius:0; }
#navBack svg { display:none; }
#navBack::before { content:"×"; font:300 34px/1 var(--font-sans); color:#231b30; }
#openArchive { position:fixed; top:calc(74px + env(safe-area-inset-top,0px)); right:max(20px,calc((100vw - 960px)/2 + 20px)); display:block; width:auto; height:auto; padding:0; border:0; background:transparent; color:#718168; font-size:11px; line-height:1.4; }
#openArchive[hidden] { display:none!important; }
main { padding:0; }
.screen { min-height:calc(100dvh - 56px - env(safe-area-inset-top,0px)); padding:26px 20px calc(var(--dock-height) + 34px); }
.screen h2 { font-family:var(--font-serif); letter-spacing:.015em; }
.btn-primary,.sim-btn,.primary { max-width:none; min-height:48px; background:#242424; border-color:#242424; border-radius:0; font-size:15px; font-weight:400; letter-spacing:.04em; }
.btn-secondary,.again-btn,.share-btn { border-radius:0; }
.dock { max-width:var(--page-max); padding:12px 20px calc(18px + env(safe-area-inset-bottom,0px)); background:linear-gradient(#f9faf700,#f9faf7 14px); border:0; }
.dock-note { font-size:12px; color:#777d76; letter-spacing:.02em; }
input:not([type=checkbox]):not([type=hidden]),select,textarea { background:#ffffffaa; border-radius:0; border-color:#8d968c; }
input:focus,select:focus,textarea:focus { outline-color:#6c8061; }
.field-col label,.field-label { font-weight:400; color:var(--ink); }

/* Activation: the approved bracelet/flower artwork remains one responsive backdrop. */
#screenProfile { padding:0 16px 150px; background-color:#9daa93; background-image:url('/assets/images/figma-ui/activation-bg.png'); background-repeat:no-repeat; background-position:center -98px; background-size:100% auto; }
#profileForm { max-width:520px; margin:0 auto; }
.activation-hero { height:258px; display:flex; align-items:flex-start; justify-content:flex-end; padding:0; position:relative; }
.activation-hero img { position:absolute; top:212px; left:4px; width:76px; height:30px; object-fit:contain; }
#activationIdentity .eyebrow { display:none; }
#activationIdentity h2 { margin:5px 0 2px 4px; font-size:22px; line-height:32px; white-space:nowrap; }
#activationIdentity .lead { font-family:var(--font-serif); font-weight:400; font-size:11px; line-height:16px; margin:0 0 64px 4px; white-space:nowrap; }
#screenProfile .field-col { gap:8px; margin-bottom:15px; }
#screenProfile .field-col label { position:relative; height:20px; padding-left:18px; font-size:14px; line-height:20px; }
#screenProfile .field-col label::before { content:""; position:absolute; top:3px; left:-1px; width:14px; height:14px; background-position:center; background-size:contain; background-repeat:no-repeat; }
#screenProfile label[for="profileName"]::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='4' r='2' fill='none' stroke='%234a5848' stroke-width='1.15'/%3E%3Cpath d='M1.8 12c.5-2.7 2.3-4 5.2-4s4.7 1.3 5.2 4' fill='none' stroke='%234a5848' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E"); }
#screenProfile label[for="profileBirthday"]::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='1.2' y='2.8' width='11.6' height='10' fill='none' stroke='%234a5848' stroke-width='1.1'/%3E%3Cpath d='M1.2 5.6h11.6M4 1v3M10 1v3' fill='none' stroke='%234a5848' stroke-width='1.1'/%3E%3C/svg%3E"); }
#screenProfile .field-col input:not([type=hidden]),#screenProfile .field-col select { height:44px; min-height:44px; padding:8px 13px; font-size:14px; }
#screenProfile .field-col .form-hint { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#screenProfile .birth-block { gap:7px; }
#screenProfile .birth-date { position:relative; height:44px; gap:0; border:1px solid #8d968c; background:#ffffffaa; }
#screenProfile .birth-date select { height:42px; min-height:42px; padding:0 6px; border:0!important; background:transparent!important; appearance:none; text-align:center; }
#screenProfile .birth-date select+select { border-left:1px solid #d6dcd2!important; }
#profileBirthDate:not(.has-date):not(:focus-within) select { color:transparent; }
#screenProfile #profileBirthDate:not(.has-date):not(:focus-within) select+select { border-left:0!important; }
#profileBirthDate:not(.has-date):not(:focus-within)::before { content:"请选择您的出生年月"; position:absolute; top:0; left:13px; z-index:1; color:#a3aaa2; font-size:14px; line-height:42px; pointer-events:none; }
#profileBirthDate:not(.has-date):not(:focus-within)::after { content:"›"; position:absolute; top:0; right:13px; z-index:1; color:#8d968c; font-size:22px; line-height:42px; pointer-events:none; }
#screenProfile #activationIdentityDock { bottom:143px; padding:0 16px 0; background:transparent; }
#screenProfile #activationIdentityDock .btn-primary { max-width:520px; min-height:49px; }
#screenProfile.security-step { background:#f4f6ef; padding-top:45px; }
#screenProfile.security-step .activation-hero { display:none; }
#activationSecurity { padding:0 4px; }
#activationSecurity h2 { font-size:29px; margin:10px 0 4px; }
#activationSecurity .lead { margin:0 0 16px; }
#screenProfile.security-step .field-col { margin-bottom:10px; }
#screenProfile.security-step { padding-bottom:calc(var(--dock-height, 110px) + 28px); }
.activation-back { border:0; padding:4px 0; color:#626d5e; background:transparent; }
#activationSecurity .note-panel { background:#eef1e9; border-color:#869478; }
#activationSecurity .dock { background:#f4f6ef; }

/* The 12-category chooser follows the 3 × 4 Figma matrix. */
#screenQuestion { padding:46px 16px 130px; background:radial-gradient(ellipse at 0 20%,#edf0e9 0,#f9faf7 47%,#f9faf7 78%,#e8ede3 120%); }
#screenQuestion h2 { font-size:24px; line-height:1.45; font-weight:700; text-align:center; letter-spacing:.025em; }
#screenQuestion h2::after { content:""; display:block; width:66px; height:1px; background:#30342e; margin:14px auto 0; }
#screenQuestion>.lead { display:none; }
.question-categories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:20px; row-gap:11px; margin:42.2px 0 0; }
.question-categories button { height:33px; min-height:33px; padding:3px 4px; border:1px solid #cbd0c9; background:#fff9; color:#6f746e; font-size:14px; font-weight:300; border-radius:0; }
.question-categories button[aria-pressed=true] { background:#e5eadd; color:#242924; border-color:#4f5950; font-weight:400; }
#screenQuestion .field-label { display:none; }
#screenQuestion textarea { display:block; height:95px; min-height:95px; margin-top:25px; padding:10px 12px; background:#fff9; font-size:12px; resize:none; }
#screenQuestion .question-count { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
#screenQuestion:not(.has-question-field) .field-label,#screenQuestion:not(.has-question-field) textarea,#screenQuestion:not(.has-question-field) .question-count { display:none; }
#screenQuestion .question-usage-strip { display:none; }
#screenQuestion .dock { gap:8px; background:linear-gradient(#f8faf700,#f2f5ef 18px); padding:12px 33px calc(24px + env(safe-area-inset-bottom,0px)); }
#screenQuestion .dock .btn-primary { height:47px; min-height:47px; padding:0; line-height:45px; }
#screenQuestion .dock-note { margin-top:3px; line-height:1.6; }

/* Ritual: SVG controller stays mounted for the timeline. The visible tube and slip are the final wood art.
   The 375×812 plate is not stretched. Its disc center (artboard y=278) stays on the bucket; --stage-w is the stage width. */
#screenRitual { --ritual-disc-y:180px; position:relative; min-height:calc(100dvh - 56px); padding:0 20px 95px; background-color:#b0c0a0; background-image:url('/assets/images/figma-ui/ritual-bg.png'); background-repeat:no-repeat; background-size:100% auto; background-position:center calc(var(--ritual-disc-y) - 278 / 375 * var(--stage-w, 100vw)); text-align:center; }
#screenRitual .ritual-hero { display:flex; flex-direction:column; align-items:center; gap:0; }
#screenRitual .ritual-art-wrap { order:1; position:relative; z-index:2; flex:none; display:flex; width:100%; height:337px; justify-content:center; align-items:flex-end; margin:0; overflow:visible; }
#screenRitual .ritual-wood { position:relative; width:183px; height:228px; margin-bottom:43px; overflow:visible; transform:translateX(8.7%); }
#screenRitual .ritual-scene { position:relative; width:100%; height:100%; overflow:visible; }
#screenRitual .ritual-scene .layer,
#screenRitual .ritual-scene .rig,
#screenRitual .ritual-scene .sticks,
#screenRitual .ritual-scene .flight { position:absolute; inset:0; }
#screenRitual .ritual-scene .shadow { z-index:0; }
#screenRitual .ritual-scene .rig { z-index:1; transform-origin:50% 78%; }
#screenRitual .ritual-scene .back { z-index:1; }
#screenRitual .ritual-scene .sticks { z-index:2; }
#screenRitual .ritual-scene .front { z-index:3; }
#screenRitual .ritual-scene .flight { z-index:4; pointer-events:none; }
#screenRitual .ritual-scene img.layer { width:100%; height:100%; display:block; object-fit:fill; }
#screenRitual .ritual-scene .stick {
  position:absolute;
  width:calc(var(--sw) / 732 * 100%);
  height:calc(var(--sh, calc(var(--sw) * 371 / 50)) / 912 * 100%);
  left:calc((var(--cx) - var(--sw) / 2) / 732 * 100%);
  top:calc(var(--top) / 912 * 100%);
  transform-origin:var(--origin-x, 50%) 18%;
  transform:rotate(var(--r));
  object-fit:fill;
  filter:brightness(var(--b, 1));
  pointer-events:none;
}
#screenRitual .ritual-scene .stick-art { display:block; width:100%; height:100%; object-fit:fill; }
#screenRitual .ritual-scene .stick-inscription {
  position:absolute; left:60%; top:30%;
  color:#432414; font:600 9px/1.1 var(--font-serif);
  writing-mode:vertical-rl; text-orientation:upright; white-space:nowrap;
  text-shadow:0 1px 1px #e8b77e80;
  transform:translateX(-50%) rotate(8deg); transform-origin:50% 0;
  opacity:0;
}
#screenRitual .ritual-scene .stick-inscription[hidden] { display:none; }
#screenRitual .ritual-scene .flight .stick-inscription:not([hidden]) { opacity:1; }
#screenRitual .ritual-scene .flight .contact-shadow {
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(48,32,18,.72) 0%, rgba(48,32,18,.28) 46%, rgba(48,32,18,0) 76%);
  filter:blur(1.5px);
}
#screenRitual .ritual-scene .flight .stick { z-index:1; }
#screenRitual .ritual-art { position:absolute; width:1px!important; height:1px!important; opacity:0; pointer-events:none; }
#screenRitual .ritual-yao-board { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; }
#screenRitual .ritual-yao-board svg { width:35px; height:50px; }
#screenRitual .ritual-hero h2 { order:2; position:relative; z-index:1; display:block; width:max-content; max-width:100%; white-space:nowrap; font:700 22px/1.4 var(--font-serif); letter-spacing:.01em; margin:2px 0 0; opacity:1!important; }
#screenRitual .ritual-focus { margin:11px -10px 0; font:600 17px/1.5 var(--font-serif); letter-spacing:.03em; }
#screenRitual .ritual-lead { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; }
#screenRitual .ritual-step { display:inline-flex; position:relative; width:78px; padding:0; margin:29px 8px 0; border:0; vertical-align:top; }
#screenRitual .ritual-step h3,#screenRitual .ritual-step p { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; }
#screenRitual .ritual-step .ritual-counter { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#screenRitual .ritual-action { width:100%; height:23px; min-height:23px; padding:0 4px; border:1px solid #838c81; border-radius:0; background:#fff8; color:#30362e; font-size:12px; line-height:21px; font-weight:400; }
#screenRitual .ritual-action:disabled { opacity:.45; background:#fff8; border-color:#838c81; color:#30362e; }
#screenRitual .ritual-step.done .ritual-action { background:#e5eadd; border-color:#687763; color:#2c392b; }
#screenRitual .ritual-footnote { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; }
#screenRitual .dock { position:relative; left:auto; bottom:auto; transform:none; width:100%; max-width:175px; margin:11px auto 0; padding:0; border:0; background:transparent; opacity:1; }
#screenRitual .dock .sim-btn { height:46px; min-height:46px; padding:0 12px; font-size:15px; line-height:44px; }
#screenRitual .dock .sim-btn:disabled { opacity:1; }
#screenRitual .ritual-usage { color:#777f72; font-size:12px; white-space:nowrap; }
#screenRitual .dock-note { font-size:10px; margin-top:0; color:#6c7468; }
#screenRitual .ritual-token-link { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:grid; justify-items:center; min-width:90px; gap:1px; border:0; background:transparent; color:#697b5c; font-size:20px; }
#screenRitual .ritual-token-link svg { width:30px; height:30px; }
#screenRitual .ritual-token-link span { font-size:12px; }
#screenRitual.is-drawing .ritual-step,#screenRitual.is-drawing .ritual-focus { opacity:.3; }
.token-sheet-backdrop { position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center; }
.token-sheet-backdrop::before { content:""; position:absolute; inset:56px 0 0; top:var(--sheet-cap-top, 56px); background:#747973e6; backdrop-filter:blur(8px); }
.token-sheet { position:relative; width:min(100%,960px); height:377px; max-height:90dvh; overflow:hidden; padding:0; background:#f6f7f2 url('/assets/images/figma-ui/token-bg.png') center/100% 100% no-repeat; text-align:center; box-shadow:0 -8px 28px #18221222; }
.token-sheet-close { position:absolute; z-index:2; top:13px; right:15px; border:0; background:transparent; font-size:20px; line-height:1; }
.token-sheet-art { position:absolute; top:90px; left:50%; transform:translateX(-50%); width:165px; height:165px; background:url('/assets/images/figma-ui/bracelet.png') center/contain no-repeat; }
.token-sheet h2 { position:absolute; top:24px; left:0; right:0; margin:0; font:600 22px/1.45 var(--font-serif); }
.token-sheet p { color:#6f746e; }
.token-sheet .token-sheet-date-label { position:absolute; top:287px; left:0; right:0; margin:0; font-size:12px; }
.token-sheet .token-sheet-date { position:absolute; top:308px; left:0; right:0; margin:0; font-size:16px; color:#242424; }

/* Result composition: sage hero, paper reading card, quiet action area. */
#screenResult { padding:0 0 240px; background-color:#f2f3ec; background-image:url('/assets/images/figma-ui/result-bg.png'); background-repeat:no-repeat; background-position:center -98px; background-size:100% auto; }
#screenResult .card { position:relative; max-width:760px; margin:0 auto; }
#screenResult .result-stick-art { position:absolute; z-index:3; pointer-events:none; right:12px; top:34px; width:129px; height:162px; }
#screenResult .result-stick-art img { display:block; width:100%; height:100%; }
#screenResult .result-stick-name { position:absolute; left:62%; top:32%; color:#432414; font:600 9px/1.1 var(--font-serif); writing-mode:vertical-rl; text-orientation:upright; white-space:nowrap; text-shadow:0 1px 1px #e8b77e80; transform:translateX(-50%) rotate(22deg); transform-origin:50% 0; }
#screenResult .result-hero { position:relative; min-height:170px; padding:34px 16px 18px; background:none; text-align:left; }
#screenResult .title { display:inline-block; position:relative; z-index:1; font:700 24px/1.4 var(--font-serif); letter-spacing:.05em; }
#screenResult .level { display:inline-block; vertical-align:5px; margin:0 0 0 10px; padding:3px 9px; border-radius:0; border-color:#9faa98; background:#eff3e8ad; color:#646f60; font-size:12px; }
#screenResult .hexagram-symbol { display:block; width:64px; height:64px; margin:8px 0 0; }
#screenResult .result-body { position:relative; z-index:1; min-height:341px; margin:-18px 16px 0; padding:34px 13px 24px; background:white; box-shadow:0 1px 1px #7b88720d; }
#screenResult .result-quote { position:relative; padding:22px 0 8px; font:600 15px/1.7 var(--font-serif); white-space:pre-wrap; }
#screenResult .result-quote::before { content:'“'; display:block; height:20px; color:#b6c6ab; font:52px/1 Georgia,serif; }
#screenResult .block { margin:0 0 20px; }
#screenResult .block-label { font-size:12px; font-weight:400; color:#9ca397; margin-bottom:4px; }
#screenResult .block p { color:#7f867b; font-size:13px; line-height:1.75; }
#screenResult .result-interpretation { margin:17px 0 0; }
#screenResult .result-interpretation p { font-size:12px; line-height:1.65; }
#screenResult .result-guidance { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:66px 0 0; }
#screenResult .result-guidance div { min-width:0; min-height:60px; height:auto; padding:6px 9px; border:1px solid #d9ddd4; font-size:13px; line-height:1.7; color:#737a70; }
#screenResult .result-guidance b { display:inline-block; margin-bottom:7px; font:600 15px/1.1 var(--font-serif); color:#758d6d; }
#screenResult .result-guidance div+div b { color:#a99c88; }
#screenResult .question-block,#screenResult .keywords,#screenResult .public-detail,#screenResult .result-code,#screenResult .result-body>.block:not(.result-interpretation) { display:none; }
#screenResult .question-block { border-top:1px solid #e9ece5; margin:0 0 20px; padding:18px 0 0; }
#screenResult .question-block .q-label { color:#7d8877; font-size:12px; font-weight:400; }
#screenResult .question-block p { font-size:13px; margin-top:4px; }
#screenResult .keywords span { border-color:#d8ded3; color:#788274; }
#screenResult .result-code { margin-bottom:0; }
#screenResult .dock { bottom:14px; gap:6px; padding:10px 28px calc(18px + env(safe-area-inset-bottom,0px)); background:transparent; }
#screenResult .dock #resultClaim { height:47px; min-height:47px; padding:0; }
#screenResult .result-quota { color:#81897d; font-size:12px; }
#screenResult .dock #resultShare { position:relative; margin-top:28px; width:auto; padding:23px 5px 0; color:#667a59; font-size:12px; text-decoration:none; }
#screenResult .dock #resultShare::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:26px; height:26px; border:1px solid #6b805f; border-radius:50%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667a59' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='7' width='14.6' height='13' rx='1'/%3E%3Cpath d='M5.6 16.2 8.4 13.3l2 1.8 2.5-3 3.1 3.9'/%3E%3Cpath d='M15.2 3.2v4.4M13 5.4h4.4'/%3E%3C/svg%3E") center/14px 14px no-repeat; }
#screenResult .dock #resultAgain { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* Detailed reading guide. QR and code always come from the current grant. */
#screenGuide { padding:0 0 220px; background:#fff; }
#screenGuide .guide { max-width:760px; margin:0 auto; }
.guide-hero { height:198px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; background:#e4eade url('/assets/images/figma-ui/guide-bg.png') center/100% 100% no-repeat; }
.guide-hero img { width:46%; max-height:225px; object-fit:contain; align-self:end; margin-left:-7px; transform:rotate(-13deg) translateY(19px); }
#screenGuide .guide-hero img,#screenGuide .guide-title { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#screenGuide .guide-title { margin:0 18px 0 0; font:600 17px/1.45 var(--font-serif); text-align:right; letter-spacing:.04em; }
#screenGuide .guide-title::after { content:""; display:block; width:56px; height:1px; margin:7px 0 0 auto; background:#556450; }
#screenGuide .guide-summary { height:60px; margin:18px 16px 17px; padding:8px 12px; background:#f6f7f3; border:0; }
#screenGuide .guide-summary h3 { font:600 16px/1.4 var(--font-serif); }
#screenGuide .guide-summary .guide-sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:2px 0 0; color:#999d95; font-size:12px; }
#screenGuide .guide-steps { padding:0 16px; }
#screenGuide .guide-section { position:relative; margin:0 0 12px; padding:12px; border:1px solid #d8ddd5; }
#screenGuide .guide-section:first-child { height:113px; }
#screenGuide .guide-section:nth-child(2) { height:177px; }
#screenGuide .step-number { position:static; display:inline-block; width:auto; height:auto; margin-right:8px; border:0; border-radius:0; color:#8fa282; font:600 17px/1 var(--font-serif); }
#screenGuide .guide-label { display:inline; margin:0; font:600 18px/1.4 var(--font-serif); }
#screenGuide .guide-label small { font:400 12px/1.4 var(--font-sans); color:#8b9187; }
#screenGuide .guide-code { position:absolute; top:49px; left:12px; right:12px; display:flex; align-items:center; justify-content:center; height:50px; margin:0; padding:0 6px; border-top:1px dashed #ecefe9; border-bottom:0; text-align:center; font-size:21px; font-weight:400; line-height:1.2; letter-spacing:.01em; overflow-wrap:anywhere; word-break:break-all; }
#screenGuide .guide-actions { justify-content:flex-end; }
#screenGuide #guideCopy { position:absolute; top:11px; right:10px; width:53px; height:22px; min-height:22px; padding:0; border:1px solid #b4bab0; background:white; color:#4d564b; font-size:11px; }
#screenGuide .guide-qr-wrap { position:absolute; top:49px; left:50%; transform:translateX(-50%); display:flex; justify-content:center; margin:0; }
#screenGuide .guide-qr-wrap img { width:106px; height:106px; padding:0; border:1px solid #666; }
#screenGuide .qr-placeholder { margin:17px auto; width:120px; height:120px; }
#screenGuide .guide-section>.guide-note { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#screenGuide #guideSaveQr { position:absolute; top:11px; right:10px; width:auto; height:22px; min-height:22px; padding:0; border:0; color:#9ca399; background:transparent; font-size:10px; }
#screenGuide .guide-next { margin-top:80px; }
#screenGuide .guide-next .guide-sub { font-size:12px; margin-top:6px; }
#screenGuide .guide>.guide-note,#screenGuide .guide-expired,#screenGuide #guideBack { margin-left:20px; margin-right:20px; }
#screenGuide .dock { padding:0 16px calc(34px + env(safe-area-inset-bottom,0px)); background:linear-gradient(#fff0,#fff 15px); }
#screenGuide .dock .btn-primary { height:47px; min-height:47px; padding:0; }

/* Supporting routes use the same paper, ink, and sage palette. */
#screenIntro,#screenChecking,#screenBlocked,#screenGuard,#screenHome { background:radial-gradient(circle at 20% 17%,#e8eee1,#f9faf7 65%); }
#screenIntro .status-screen,#screenChecking .status-screen,#screenBlocked .status-screen { justify-content:center; }
.status-screen h2 { font-family:var(--font-serif); font-size:26px; }
.status-icon { border-color:#637b5e; }
.status-icon.nfc::after { border-color:#637b5e; }
.status-icon.blocked::after { background:#637b5e; }
#screenBlocked .dock,#screenGuard .dock,#screenHome .dock { background:#f7f9f4; }
#screenHome h2 { font-size:29px; }
#screenHome .token-card { min-height:180px; padding:70px 18px 15px; background:#e5ebdf url('/assets/images/figma-ui/activation-bg.png') center 40%/cover no-repeat; border:0; }
#screenHome .token-card p { max-width:220px; color:#596657; }
#screenHome .usage-grid { background:#fff9; border-color:#d9ded4; }
#screenHome .activation-label { border-radius:0; border-color:#9fac9a; }
#screenRecords,#screenArchive { background:#f7f9f4; }
#screenRecords .record-item,#screenArchive .archive-section { border-color:#d9ded4; background:#fff; }
.status-screen .note-panel { border-color:#899d83; background:#edf1e9; }
#screenChecking { position:relative; padding:0; background-color:#c2cab9; background-image:url('/assets/images/figma-ui/checking-bg.png'); background-repeat:no-repeat; background-position:center -98px; background-size:100% auto; }
#screenChecking .checking { position:relative; min-height:calc(100dvh - 56px); padding:0; }
#screenChecking .checking::before { display:none; }
#screenChecking .eyebrow,#screenChecking .status-icon,#screenChecking .note-panel { display:none; }
#screenChecking h2 { position:absolute; top:min(498px,calc(100dvh - 258px)); left:0; right:0; margin:0; font-size:24px; }
#screenChecking .lead { position:absolute; top:min(538px,calc(100dvh - 218px)); left:0; right:0; max-width:320px; margin:0 auto; color:#9aa195; font-size:12px; }
#screenChecking .status-bottom { bottom:58px; color:#9aa195; }
#screenBlocked { position:relative; padding:0; background-color:#c2cab9; background-image:url('/assets/images/figma-ui/blocked-bg.png'); background-repeat:no-repeat; background-position:center -98px; background-size:100% auto; }
#screenBlocked .status-screen { position:relative; min-height:calc(100dvh - 56px); padding:0; }
#screenBlocked .status-screen::before { content:""; position:absolute; top:27px; left:17px; width:64px; height:25px; background:url('/assets/images/figma-ui/blocked-logo.png') center/contain no-repeat; }
#screenBlocked .status-icon.blocked { position:absolute; top:140px; left:50%; transform:translateX(-50%); width:68px; height:68px; margin:0; border:1.5px solid var(--ink); }
#screenBlocked .status-icon.blocked::after { content:""; position:absolute; inset:0; width:auto; height:auto; transform:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Crect x='32.15' y='17' width='3.7' height='22' fill='%2325232a'/%3E%3Crect x='32.15' y='43.2' width='3.7' height='3.7' fill='%2325232a'/%3E%3C/svg%3E") center/68px 68px no-repeat; }
#screenBlocked .status-screen h2 { position:absolute; top:259px; left:0; right:0; margin:0; font-size:24px; }
#screenBlocked .status-screen .lead { position:absolute; top:301px; left:0; right:0; max-width:240px; margin:0 auto; color:#92998e; font-size:12px; white-space:pre-line; }
#screenBlocked .status-screen .muted { display:none; }
#screenBlocked .dock { position:absolute; top:362px; left:50%; bottom:auto; transform:translateX(-50%); width:165px; margin:0; padding:0; background:none; }
#screenBlocked .dock .btn-secondary { height:44px; min-height:44px; padding:0; border:1px solid #545b52; background:#fff8; color:#252a24; font-size:16px; }
#screenBlocked .status-bottom { display:none; }
/* Frame 8 share slip and frame 11 advisor card. Viewport y = Figma y − 42; overlay starts under the 56px nav.
   When the nav has scrolled away, --sheet-cap paints the same mask over the uncovered strip without moving the card. */
.share-overlay { background:transparent; }
.share-overlay::before { content:""; position:fixed; z-index:-1; left:0; right:0; bottom:0; top:var(--sheet-cap-top, 56px); background:rgba(0,0,0,.77); }
.share-stage,.advisor-card { position:absolute; left:50%; width:min(311px,calc(100vw - 24px)); margin-left:calc(min(311px,calc(100vw - 24px)) / -2); }
.share-stage { top:66px; }
.advisor-card { top:141px; height:403px; background:#e8ebe3 url('/assets/images/figma-ui/advisor-card-paper.png') center/100% 100% no-repeat; }
.sheet-x { position:absolute; top:-44.75px; right:-22.25px; width:44px; height:44px; padding:0; border:0; background:transparent; color:#fff; display:grid; place-items:center; }
.sheet-x svg { width:10.5px; height:10.5px; fill:none; stroke:#fff; stroke-width:1.15; stroke-linecap:round; }
.sheet-x:focus,.sheet-save:focus { outline:none; }
.sheet-x:focus-visible,.sheet-save:focus-visible { outline:1px solid #fff; outline-offset:3px; }
#shareImg { width:100%; height:auto; max-height:none; background:transparent; object-fit:contain; }
.sheet-save { display:flex; flex-direction:column; align-items:center; gap:5px; width:48px; margin:30px auto 24px; padding:0; border:0; background:transparent; color:#fff; font:400 12px/17px var(--font-sans); scroll-margin-bottom:12px; }
/* While the share sheet is open, user.js placeShareDock() moves the result dock so 详细解卦 stays under the slip and 今日剩余 sits between the slip and 保存图片. */
/* 320×690: a short slip is still ~496px tall and leaves 保存图片 past the fold.
   Raise only this sheet, keep the control below the slip, and hide the result-page 保存卦签 that would sit on the same spot. */
@media (max-width:340px) and (max-height:720px) {
  #shareOverlay .share-stage { top:48px; }
  #shareOverlay .sheet-save { margin-top:16px; margin-bottom:12px; }
  body:has(#shareOverlay:not([hidden])) #screenResult #resultShare { visibility:hidden; }
}
@media (max-width:340px) {
  .share-overlay .sheet-x { right:calc((100vw - 100%) / -2 + 4px); }
}
.sheet-save-icon { display:grid; place-items:center; width:34px; height:34px; border:.6px solid rgba(255,255,255,.6); border-radius:50%; }
.sheet-save-icon svg { width:16px; height:16px; fill:none; stroke:#fff; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.sheet-save span:last-child { white-space:nowrap; }
.sheet-tip { width:min(280px,100%); margin:0 auto 16px; color:#fff; font-size:12px; line-height:1.5; text-align:center; }
.advisor-mark { position:absolute; top:30px; left:50%; width:30.5px; height:59px; transform:translateX(-50%); object-fit:contain; }
.advisor-card h2 { position:absolute; top:109px; left:0; right:0; margin:0; text-align:center; font:700 24px/34px var(--font-serif); letter-spacing:1.44px; color:#000; }
.advisor-card h2::after { content:""; position:absolute; left:50%; top:47px; width:65px; border-top:1.3px solid #222; transform:translateX(-50%); }
.advisor-lead { position:absolute; top:146px; left:17px; width:277px; max-width:calc(100% - 34px); margin:0; text-align:center; font:300 13px/18.2px var(--font-sans); color:#222; }
.advisor-card::before { content:"“"; position:absolute; left:-2px; top:110px; color:#efefed; font:600 40px/57px var(--font-serif); pointer-events:none; }
.advisor-qr { position:absolute; top:228px; left:100px; width:112px; height:112px; display:flex; align-items:center; justify-content:center; background:#fff; }
.advisor-qr img { width:103.5px; height:104.6px; max-width:none; object-fit:contain; background:#fff; }
.advisor-hint { position:absolute; top:349px; left:0; right:0; margin:0; text-align:center; font:300 11px/15.4px var(--font-sans); color:#92948d; }
@media (max-width:360px) {
  .advisor-lead { width:calc(100% - 34px); }
  .advisor-qr { left:50%; transform:translateX(-50%); }
}

@media (max-width:360px) {
  #screenRitual { --ritual-disc-y:144px; }
  .question-categories { column-gap:10px; }
  #screenQuestion h2 { font-size:25px; }
  #activationIdentity h2,#activationIdentity .lead { white-space:normal; }
  #activationIdentity h2 { font-size:22px; }
  #activationIdentity .lead { font-size:11px; line-height:1.5; }
  #screenRitual .ritual-focus { font-size:15px; white-space:normal; }
  #screenRitual .ritual-art-wrap { height:280px; }
  #screenRitual .ritual-wood { width:150px; height:auto; aspect-ratio:183 / 228; }
  #screenRitual .ritual-hero h2 { font-size:22px; }
  #screenGuide .guide-section:first-child,#screenGuide .guide-section:nth-child(2) { height:auto; min-height:0; padding-bottom:12px; }
  #screenGuide .guide-code,#screenGuide .guide-qr-wrap { position:relative; top:auto; left:auto; right:auto; height:auto; min-height:0; margin:10px auto 0; transform:none; }
  #screenGuide #guideCopy,#screenGuide #guideSaveQr { position:relative; top:auto; right:auto; display:block; width:max-content; max-width:100%; height:auto; margin:8px 0 0 auto; }
}
@media (max-height:720px) {
  #screenRitual { --ritual-disc-y:115px; }
  #activationIdentity .lead { margin-bottom:20px; white-space:normal; }
  #screenProfile #activationIdentityDock { bottom:8px; }
  #screenRitual .ritual-art-wrap { height:245px; }
  #screenRitual .ritual-wood { width:140px; height:auto; aspect-ratio:183 / 228; }
  #screenRitual .ritual-hero h2 { margin-top:9px; }
  #screenRitual .ritual-focus { margin-top:9px; }
  #screenRitual .ritual-step { margin-top:16px; }
  #screenRitual .dock { margin-top:18px; }
  #screenRitual .ritual-token-link { bottom:5px; }
  .guide-hero { height:128px; background-position:center 42%; background-size:cover; }
  #screenGuide .guide-summary { margin:6px 16px 4px; }
  #screenGuide .guide-section { margin-bottom:6px; }
  #screenResult .result-hero { min-height:132px; padding-top:22px; }
  #screenResult .result-body { min-height:0; padding-top:20px; }
  #screenResult .result-guidance { margin-top:18px; }
  #screenResult .result-quote { padding-top:8px; }
}
@media (min-width:600px) {
  #screenQuestion { padding-top:82px; }
  .question-categories { max-width:450px; margin:55px auto 0; }
  #screenQuestion .field-label,#screenQuestion textarea,#screenQuestion .question-count { max-width:450px; margin-left:auto; margin-right:auto; }
  #screenRitual { --ritual-disc-y:202px; }
  #screenRitual .ritual-art-wrap { height:370px; }
  #screenRitual .ritual-wood { width:200px; height:auto; aspect-ratio:183 / 228; max-height:290px; }
  #screenProfile { background-size:cover; }
  #screenGuide .guide-hero { background:#e4eade url('/assets/images/figma-ui/ritual-bg.png') center/cover no-repeat; }
  #screenGuide .guide-hero img { position:static; width:46%; height:auto; overflow:visible; clip:auto; transform:rotate(-13deg) translateY(19px); }
  #screenGuide .guide-title { position:static; width:auto; height:auto; overflow:visible; clip:auto; }
}