:root { --paper:#fbf3e6; --ui:#775338; --ui-font:'Microsoft YaHei','PingFang SC',sans-serif; --name-color:#805129; --name-font:'YouYuan','Yuanti SC','PingFang SC','Microsoft YaHei',sans-serif; --name-weight:700; --name-space:2px; --name-outline:1px; --button-paper:#fff9efbd; --edge:#dcc4ae; }
* { box-sizing:border-box; }
html,body { margin:0; min-width:390px; width:100%; min-height:100%; }
body { min-height:100vh; min-height:100dvh; display:grid; place-items:center; background:#eee8df; font:14px/1.5 var(--ui-font); color:#714829; }
button,input,select { font:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid #a37755; outline-offset:4px; }
[hidden] { display:none!important; }
.naming-card { --card-top:18px; --control-gap:8px; --tools-lift:54px; position:relative; width:390px; height:844px; height:min(844px,100dvh); min-height:440px; overflow:hidden; background:var(--paper); isolation:isolate; }
.main-layer { position:absolute; inset:0; }
.art-view { position:absolute; inset:0; overflow:hidden; }
.background-art { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }
.name-area { position:absolute; top:50%; left:50%; width:180px; padding:0 8px; transform:translate(-50%,-50%); text-align:center; color:var(--name-color); transition:opacity .18s,transform .18s; }
.name-area.is-generating { opacity:.35; transform:translate(-50%,-50%) translateY(3px); }
.name-output { margin:0; display:flex; flex-direction:column; align-items:center; font-family:var(--name-font); font-weight:var(--name-weight); font-size:136px; line-height:1.13; letter-spacing:var(--name-space); -webkit-text-stroke:var(--name-outline) var(--name-color); }
.name-output.is-empty { font-size:82px; line-height:1.12; letter-spacing:2px; }
.name-output.is-long { font-size:108px; }
.name-output span { display:block; }
.result-note { min-height:18px; margin:15px 5px 0; color:var(--name-color); font-size:11px; line-height:1.75; opacity:.75; letter-spacing:1px; }
.left-rail { position:absolute; inset:0 auto 0 0; width:38px; background:transparent; color:var(--ui); }
.site-name { width:max-content; margin:var(--card-top) 0 0 8px; color:#fffdf7; font-size:16px; line-height:1.5; font-weight:700; letter-spacing:1px; text-align:left; white-space:nowrap; -webkit-text-stroke:.6px #6d5948; paint-order:stroke fill; text-shadow:0 1px 2px #49352266; }
.birth-summary { position:absolute; left:8px; top:52px; display:flex; flex-direction:column; gap:3px; width:max-content; max-width:142px; max-height:calc(100% - 260px - var(--tools-lift)); padding:8px 10px; border:1px solid color-mix(in srgb,var(--ui) 18%,transparent); border-radius:12px; background:color-mix(in srgb,var(--paper) 45%,transparent); backdrop-filter:blur(4px); color:var(--ui); font-size:12px; line-height:1.6; overflow-wrap:anywhere; overflow-y:auto; scrollbar-width:thin; overscroll-behavior:contain; touch-action:pan-y pinch-zoom; }
.birth-summary-row { display:flex; flex:0 0 auto; align-items:center; gap:5px; min-width:0; }
.birth-summary-icon { flex:0 0 14px; width:14px; height:14px; opacity:.85; }
.birth-summary-icon svg { display:block; width:14px; height:14px; }
.birth-summary-value { min-width:0; }
.birth-summary-row[data-field='date'] .birth-summary-value { white-space:pre-line; }
.tools { position:absolute; left:8px; bottom:calc(max(27px,env(safe-area-inset-bottom)) + var(--tools-lift)); display:flex; flex-direction:column; gap:var(--control-gap); }
.tool { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:6px; width:72px; min-height:36px; padding:6px 6px; color:var(--ui); border:1px solid var(--edge); border-radius:9px; background:var(--button-paper); font-size:14px; line-height:1.5; white-space:nowrap; }
.tool-icon { flex:0 0 20px; width:20px; height:20px; display:grid; place-items:center; }
.tool-icon svg { width:20px; height:20px; }
.tool:disabled { opacity:.45; cursor:wait; }
.ai-label { white-space:nowrap; }
.ai-tool[aria-checked='true'] { background:#7c9473; color:#fffdf3; border-color:#7c9473; }
.right-navigation { --rail-top:var(--card-top); --rail-bottom:30px; --rail-fade-top:0px; --rail-fade-bottom:0px; position:absolute; right:0; top:0; bottom:0; width:86px; color:var(--ui); }
.right-rail { position:absolute; right:0; top:0; bottom:0; width:86px; padding:var(--card-top) 5px max(20px,env(safe-area-inset-bottom)); overflow-y:auto; display:flex; flex-direction:column; gap:var(--control-gap); scrollbar-width:none; overscroll-behavior:contain; touch-action:pan-y pinch-zoom; -webkit-overflow-scrolling:touch; background:transparent; color:var(--ui); }
.right-navigation.is-desktop .right-rail { top:var(--rail-top); bottom:var(--rail-bottom); padding:0 5px; mask-image:linear-gradient(to bottom,transparent,#000 var(--rail-fade-top),#000 calc(100% - var(--rail-fade-bottom)),transparent); }
.right-navigation.is-desktop.has-overflow .right-rail { top:48px; bottom:48px; }
.right-navigation.is-desktop.can-scroll-up { --rail-fade-top:18px; }
.right-navigation.is-desktop.can-scroll-down { --rail-fade-bottom:18px; }
.rail-more { position:absolute; right:5px; z-index:1; width:76px; height:40px; padding:6px; display:grid; place-items:center; border:0; border-radius:20px; background:transparent; color:var(--ui); }
.rail-more::before { content:''; position:absolute; width:36px; height:36px; border-radius:50%; background:var(--button-paper); opacity:0; transition:opacity .2s ease,box-shadow .2s ease; }
.rail-more:focus-visible::before { opacity:1; }
.rail-more-up { top:4px; }
.rail-more-down { bottom:4px; }
.rail-more svg { position:relative; width:28px; height:28px; filter:drop-shadow(0 0 2px var(--paper)); }
.rail-more:disabled { opacity:.2; cursor:default; }
.right-rail::-webkit-scrollbar { display:none; }
.parameter-button { position:relative; flex:0 1 40px; width:76px; min-height:32px; max-height:40px; border:1px solid var(--edge); border-radius:11px; display:flex; align-items:center; justify-content:center; padding:5px 2px; background:var(--button-paper); color:var(--ui); }
.parameter-label { display:flex; justify-content:space-between; width:3em; font-size:18px; font-weight:600; line-height:1.1; white-space:nowrap; }
.parameter-button.is-direct .parameter-label { width:2em; margin-left:auto; margin-right:8px; justify-content:flex-start; }
.rail-switch { flex:0 0 24px; width:24px; height:14px; padding:2px; border-radius:8px; background:color-mix(in srgb,var(--ui) 25%,var(--paper)); transition:background-color .2s ease; }
.rail-switch>span { display:block; width:10px; height:10px; border-radius:50%; background:#fffdf7; box-shadow:0 1px 2px #0002; transition:transform .2s ease; }
.parameter-button.is-direct[aria-checked='true'] .rail-switch { background:var(--selection-color,#527f56); }
.parameter-button.is-direct[aria-checked='true'] .rail-switch>span { transform:translateX(10px); }
.tool,.parameter-button { transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease; }
@media (hover:hover) and (pointer:fine) {
  .tool:hover:not(:disabled),.parameter-button:hover:not(:disabled) { border-color:var(--ui); box-shadow:0 0 0 2px color-mix(in srgb,var(--ui) 12%,transparent),0 3px 12px color-mix(in srgb,var(--ui) 16%,transparent); }
  .tool:hover:not(:disabled):not([aria-checked='true']),.parameter-button:hover:not(:disabled) { background-color:color-mix(in srgb,var(--button-paper) 30%,var(--paper)); }
  .rail-more:hover:not(:disabled)::before { opacity:1; box-shadow:0 0 12px color-mix(in srgb,var(--ui) 18%,transparent); }
}
.tool:active:not(:disabled),.parameter-button:active:not(:disabled) { border-color:var(--ui); box-shadow:inset 0 1px 6px color-mix(in srgb,var(--ui) 22%,transparent),0 0 0 1px color-mix(in srgb,var(--ui) 16%,transparent); }
.rail-more:active:not(:disabled)::before { opacity:1; box-shadow:inset 0 1px 5px color-mix(in srgb,var(--ui) 22%,transparent); }
.parameter-panel { position:absolute; inset:0; z-index:10; padding:0 20px; color:#724724; background:#fbf5e9 url('panel.png') center/cover no-repeat; display:flex; flex-direction:column; font-family:var(--ui-font); }
.panel-close { width:56px; min-height:56px; display:grid; place-items:center; padding:14px; margin:8px 0 12px -10px; border:0; background:transparent; color:inherit; }
.panel-close svg { width:28px; height:28px; }
.panel-title { margin:0 0 28px; font:700 36px/1.3 var(--ui-font); letter-spacing:2px; }
.panel-title-note { display:inline-block; margin-left:6px; color:#000; font-size:24px; font-weight:400; letter-spacing:0; white-space:nowrap; }
.panel-scroll { flex:1; min-height:0; overflow-y:auto; padding:0 1px max(24px,env(safe-area-inset-bottom)); scrollbar-width:thin; overscroll-behavior:contain; }
.panel-done { display:block; min-height:51px; width:100%; margin:24px 0 0; border:0; border-radius:28px; background:#87512d; color:#fff8ec; font:600 22px/1.3 var(--ui-font); letter-spacing:2px; }
.option-group { display:flex; flex-direction:column; gap:13px; }
.option { min-height:72px; padding:18px; display:flex; align-items:center; justify-content:space-between; border:1px solid #d9c2ac; border-radius:16px; background:#fff9ef66; color:#70421f; font:600 24px/1.4 var(--ui-font); }
.option[aria-checked='true'] { background:#f9e7d76e; border-color:#e5b69a; }
.option-text { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; text-align:left; }
.option-note { color:#000; font-size:13px; font-weight:400; white-space:nowrap; }
.setting-switch { min-height:72px; width:100%; padding:17px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; border:1px solid #d9c2ac; border-radius:16px; background:#fff9ef66; color:#70421f; font-size:20px; text-align:left; }
.switch-track { display:block; flex:0 0 49px; width:49px; height:29px; padding:3px; border-radius:18px; background:#dbc8b4; transition:background .15s; }
.switch-track>span { display:block; width:23px; height:23px; border-radius:50%; background:#fffdf7; box-shadow:0 1px 3px #71482933; transition:transform .15s; }
.setting-switch[aria-checked='true'] .switch-track { background:#87512d; }
.setting-switch[aria-checked='true'] .switch-track>span { transform:translateX(20px); }
.specified-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.radio-dot { width:29px; height:29px; border:2px solid #d5bda5; border-radius:50%; padding:4px; display:block; }
.option[aria-checked='true'] .radio-dot { border-color:#e4b493; }
.option[aria-checked='true'] .radio-dot::after { content:''; display:block; width:100%; height:100%; border-radius:50%; background:#754321; }
.input-label { display:block; font-size:13px; margin:0 0 9px; color:#866c52; }
.text-input { width:100%; min-height:62px; padding:13px 17px; border:1px solid #d9c2ac; border-radius:14px; background:#fff9ef85; color:#70421f; font-size:22px; line-height:1.4; }
.text-input::placeholder { color:#b29d87; font-size:16px; }
.text-input[type='time'] { letter-spacing:1.5px; }
.date-field { position:relative; }
.date-field .text-input { display:block; }
.date-placeholder { display:none; position:absolute; top:50%; left:18px; transform:translateY(-50%); color:#70421f; font-size:22px; line-height:1.4; pointer-events:none; }
.date-field.is-empty:not(:focus-within) .date-placeholder { display:block; }
.date-field.is-empty:not(:focus-within) input { color:transparent; }
.date-field.is-empty:not(:focus-within) input::-webkit-datetime-edit { visibility:hidden; }
.panel-hint { margin:16px 0 0; font-size:13px; color:#947c61; line-height:1.8; }
.field-feedback { margin:15px 0 0; color:#a34534; font-size:13px; line-height:1.8; }
.length-options { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.length-options .option { flex-direction:column; gap:17px; padding:21px 10px; font-size:25px; }
.position-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.position-options .option { font-size:14px; font-weight:400; }
.quick-places { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.place-choice { min-height:43px; padding:9px 16px; border:1px solid #d9c2ac; border-radius:22px; background:#fff9ef85; color:#775338; font-size:14px; }
.place-choice[aria-pressed='true'] { background:#e9cfb8; }
.calendar { margin-top:20px; }
.calendar-heading { display:grid; grid-template-columns:44px 44px minmax(0,1fr) 44px 44px; gap:6px; align-items:center; margin-bottom:16px; color:#805b3c; font-size:17px; }
.calendar-heading>span { text-align:center; white-space:nowrap; }
.calendar-nav { width:44px; height:44px; border:1px solid #dcc5af; background:#fff8eb88; border-radius:50%; color:#805b3c; display:grid; place-items:center; }
.calendar-nav svg { width:18px; height:18px; }
.calendar-week,.calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; text-align:center; }
.calendar-week { margin-bottom:10px; color:#a88b6d; font-size:12px; }
.calendar-day { min-width:0; min-height:42px; border:0; border-radius:50%; background:transparent; color:#795334; font-size:15px; }
.calendar-day[aria-pressed='true'] { background:#87512d; color:#fff8eb; }
.calendar-day:hover { outline:1px solid #c5a385; }
.calendar-empty { min-height:42px; }
.birth-time-field { margin-top:24px; }
.birth-time-row { display:flex; align-items:center; gap:16px; }
.birth-time-row .input-label { flex:0 0 auto; margin:0; white-space:nowrap; }
.birth-time-row .text-input { flex:0 0 156px; width:156px; min-width:0; min-height:48px; padding:9px 12px; font-size:20px; }
.toast { position:absolute; z-index:20; bottom:23px; left:50%; transform:translateX(-50%); max-width:275px; padding:11px 17px; border-radius:18px; background:#604125ed; color:#fff9ed; text-align:center; font-size:12px; box-shadow:0 4px 16px #412d1c16; }
.export-panel { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; padding:0 20px 24px; background:#fbf5e9; color:#724724; font-family:var(--ui-font); }
.export-panel .panel-close { margin-top:2px; margin-bottom:3px; }
.export-title { margin:0 0 15px; font:700 27px/1.3 var(--ui-font); }
.export-body { flex:1; min-height:0; position:relative; }
.export-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.export-hint { text-align:center; font-size:12px; color:#947c61; margin:14px 0; }
.download-image { display:flex; align-items:center; justify-content:center; flex:0 0 51px; border-radius:28px; background:#87512d; color:#fff8ec; text-decoration:none; font-size:18px; }
.download-image:focus-visible { outline:2px solid #a37755; outline-offset:4px; }
@media (min-width:391px) { .naming-card { box-shadow:0 12px 48px #60402012; } }
@media (max-height:700px) { .panel-close { margin-top:2px; margin-bottom:2px; } .panel-title { margin-bottom:20px; font-size:31px; } .right-rail { padding-top:24px; } .name-output { font-size:116px; } .name-output.is-empty { font-size:70px; } .name-output.is-long { font-size:90px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }