:root{
    --page-deep:#5a4a2a;
    --page-mid:#8a7a5a;
    --page-accent:#b3863f;
    --page-accent-light:#7a5e1e;
    --page-text:#3a3020;
    --page-muted:#807060;
    --page-card:rgba(255,255,255,0.94);
    --page-line:rgba(181,143,55,0.28);
    --page-shadow:0 14px 36px rgba(46,36,20,0.08);
}

*{box-sizing:border-box;}
html{min-height:100%;background:transparent;}
body{
    margin:0;
    min-height:100vh;
    color:var(--page-text);
    font-family:"Microsoft YaHei","PingFang SC",sans-serif;
    background:#f5f6f8;
    background-position:top center;
}
button,input,select,textarea{font:inherit;}
button{touch-action:manipulation;}

.mystic-wrapper{
    position:relative;
    width:100%;
    max-width:750px;
    min-height:100vh;
    margin:0 auto;
    overflow:visible;
    padding-bottom:80px;
}
.mystic-wrapper::before,
.mystic-wrapper::after{
    content:"";
    position:fixed;
    z-index:0;
    width:280px;
    height:280px;
    border:1px solid rgba(236,215,139,0.12);
    border-radius:50%;
    pointer-events:none;
}
.mystic-wrapper::before{top:118px;left:-170px;box-shadow:0 0 0 28px rgba(236,215,139,0.025),0 0 0 58px rgba(236,215,139,0.018);}
.mystic-wrapper::after{right:-190px;bottom:80px;box-shadow:0 0 0 34px rgba(236,215,139,0.022),0 0 0 70px rgba(236,215,139,0.014);}

.mystic-header{
    position:relative;
    z-index:5;
    padding:16px 16px 14px;
    text-align:center;
    color:#7a5e1e;
    background:linear-gradient(180deg,#fdfaf2 0%,#f7f2e4 100%);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}
.mystic-back{
    position:absolute;
    top:50%;
    left:16px;
    transform:translateY(-50%);
    border:0;
    padding:8px 10px 8px 0;
    color:#b3863f;
    background:transparent;
    font-size:24px;
    font-weight:bold;
    cursor:pointer;
}
.mystic-brand{
    margin-bottom:3px;
    color:rgba(122,94,30,0.7);
    font-family:KaiTi,"STKaiti",serif;
    font-size:13px;
    letter-spacing:6px;
}
.mystic-title{
    color:#7a5e1e;
    font-family:KaiTi,"STKaiti",serif;
    font-size:22px;
    font-weight:bold;
    letter-spacing:6px;
}

.mystic-content{position:relative;z-index:1;padding:18px 14px 0;}
.mystic-hero{
    position:relative;
    min-height:0;
    height:auto;
    padding:14px 16px;
    overflow:hidden;
    text-align:center;
    border:1px solid rgba(229,204,117,0.28);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(255,250,240,0.88),rgba(245,235,215,0.82));
    box-shadow:0 2px 10px rgba(0,0,0,0.06);
}
.mystic-kicker{
    position:relative;
    z-index:2;
    color:#b89441;
    font-family:KaiTi,"STKaiti",serif;
    font-size:21px;
    font-weight:bold;
    letter-spacing:5px;
    margin-bottom:8px;
}
.mystic-subtitle{
    position:relative;
    z-index:2;
    margin-top:0;
    color:#5a5040;
    font-size:14px;
    line-height:1.85;
    letter-spacing:1.5px;
}
.astro-wheel{display:none !important;}

.mystic-card{
    position:relative;
    margin-top:15px;
    padding:18px 16px;
    color:var(--page-text);
    background:var(--page-card);
    border:1px solid var(--page-line);
    border-radius:20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.06);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}
.card-ribbon{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    margin-bottom:16px;
    color:var(--page-deep);
    font-family:KaiTi,"STKaiti",serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:4px;
}
.card-ribbon::before,.card-ribbon::after{
    content:"";
    width:48px;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--page-accent));
}
.card-ribbon::after{background:linear-gradient(90deg,var(--page-accent),transparent);}

.field-row{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:50px;
    margin-bottom:12px;
    padding:8px 12px;
    background:rgba(247,244,233,0.76);
    border:1px solid var(--page-line);
    border-radius:13px;
}
.field-row.is-column{display:block;padding:12px;}
.field-row:last-child{margin-bottom:0;}
.field-label{
    width:76px;
    flex:0 0 76px;
    color:#4b5b57;
    font-size:14px;
    font-weight:bold;
}
.field-help{
    margin-top:7px;
    color:var(--page-muted);
    font-size:12px;
    line-height:1.65;
}
.field-control{
    width:100%;
    min-width:0;
    height:36px;
    padding:0 10px;
    color:#334843;
    background:rgba(255,255,255,0.84);
    border:1px solid rgba(160,129,53,0.28);
    border-radius:9px;
    outline:none;
}
.field-control:focus{
    border-color:var(--page-accent);
    box-shadow:0 0 0 3px rgba(216,182,87,0.14);
}
.date-grid{
    display:grid;
    grid-template-columns:1.2fr .85fr .85fr;
    gap:7px;
    width:100%;
    min-width:0;
}
.date-grid .field-control{padding:0 6px;text-align:center;}
.month-control{max-width:220px;}
.calendar-choice .choice-btn{flex:1;max-width:110px;}
.calendar-hint{
    display:flex;
    min-height:44px;
    align-items:center;
    gap:9px;
    margin:-3px 0 12px;
    padding:7px 11px;
    color:#76551d;
    background:linear-gradient(135deg,rgba(255,253,239,0.96),rgba(244,226,177,0.72));
    border:1px solid rgba(185,136,54,0.34);
    border-radius:13px;
    box-shadow:0 4px 12px rgba(118,82,28,0.08),inset 0 1px 0 rgba(255,255,255,0.86);
    font-size:12px;
    line-height:1.45;
}
.calendar-hint-icon{
    display:flex;
    width:29px;
    height:29px;
    flex:0 0 29px;
    align-items:center;
    justify-content:center;
    color:#fff0ae;
    background:linear-gradient(145deg,var(--page-deep),#ad7c2e);
    border:1px solid rgba(216,182,87,0.68);
    border-radius:50%;
    box-shadow:0 3px 8px rgba(112,77,25,0.2);
    font-family:KaiTi,"STKaiti",serif;
    font-size:15px;
    font-weight:bold;
}
.calendar-hint-label{
    flex:0 0 auto;
    color:#8a7655;
    white-space:nowrap;
}
.calendar-hint-value{
    min-width:0;
    flex:1;
    color:#73501a;
    font-size:13px;
    font-weight:bold;
    letter-spacing:.5px;
    text-align:right;
}

/* 时辰下拉样式 —— 与 app.css 保持一致的金/米色风格 */
.ymd-time-row{position:relative;display:flex;align-items:center;gap:10px;background:rgba(245,240,230,0.6);border-radius:12px;padding:12px 14px;border:1px solid rgba(201,168,76,0.2);margin:0 1px 12px;}
.ymd-time-icon{font-size:18px;color:#c9a84c;flex-shrink:0;}
.ymd-time-label{font-size:15px;color:#555;font-weight:bold;flex-shrink:0;width:60px;}
.ymd-time-picker{flex:1;display:flex;gap:6px;align-items:center;justify-content:flex-end;}
.time-dropdown-picker{position:relative;z-index:auto;gap:8px;overflow:visible;display:flex;flex:1;gap:8px;}
.time-dropdown{position:relative;flex:1;min-width:0;}
.time-dropdown-trigger{display:flex;width:100%;height:40px;align-items:center;justify-content:center;gap:5px;padding:0 26px 0 10px;color:#263e39;background:linear-gradient(180deg,#fff,#fbf7e9);border:1px solid rgba(184,148,65,0.38);border-radius:11px;box-shadow:0 3px 10px rgba(88,65,20,0.07),inset 0 1px 0 #fff;cursor:pointer;position:relative;}
.time-dropdown-trigger:hover,.time-dropdown.open .time-dropdown-trigger{border-color:#b89441;box-shadow:0 0 0 3px rgba(184,148,65,0.12),0 4px 12px rgba(88,65,20,0.1);}
.time-dropdown-value{font-size:16px;font-weight:bold;letter-spacing:1px;}
.time-dropdown-unit{color:#8a6d30;font-size:12px;}
.time-dropdown-arrow{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:#b89441;font-size:10px;transition:transform .2s ease;}
.time-dropdown.open .time-dropdown-arrow{transform:translateY(-50%) rotate(180deg);}
.time-dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;width:200px;max-width:calc(100vw - 40px);max-height:252px;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:9px;overflow-y:auto;background:rgba(255,253,244,0.98);border:1px solid rgba(184,148,65,0.48);border-radius:15px;box-shadow:0 4px 12px rgba(28,54,49,0.08);z-index:120;animation:timeDropdownIn .18s ease both;-webkit-overflow-scrolling:touch;}
.time-dropdown-minute .time-dropdown-menu{right:0;left:auto;}
.time-dropdown.open .time-dropdown-menu{display:grid;}
.time-dropdown-option{display:flex;height:35px;align-items:center;justify-content:center;padding:0;color:#4d5b57;background:#fff;border:1px solid rgba(184,148,65,0.14);border-radius:9px;font-size:13px;cursor:pointer;}
.time-dropdown-option:hover{color:#7b5d21;background:#f7edca;border-color:rgba(184,148,65,0.38);}
.time-dropdown-option.active{color:#b89441;background:#faf6e8;border-color:#d4b874;box-shadow:0 2px 6px rgba(0,0,0,0.06);font-weight:bold;}
@keyframes timeDropdownIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.time-dropdown-menu::-webkit-scrollbar{width:5px;}
.time-dropdown-menu::-webkit-scrollbar-track{background:transparent;}
.time-dropdown-menu::-webkit-scrollbar-thumb{background:rgba(184,148,65,0.36);border-radius:3px;}

.zi-hour-hint{margin:0 14px 12px;padding:10px 14px;background:rgba(220,120,50,0.08);border:1px solid rgba(220,120,50,0.25);border-radius:10px;font-size:13px;color:#b5601c;line-height:1.6;}

.choice-group{display:flex;gap:8px;flex:1;}
.choice-btn{
    min-width:66px;
    height:36px;
    padding:0 18px;
    color:#6d746f;
    background:#fff;
    border:1px solid rgba(42,75,69,0.14);
    border-radius:19px;
    cursor:pointer;
}
.choice-btn.active{
    color:#fff9df;
    background:linear-gradient(135deg,#d0a847,#af8232);
    border-color:#d8b657;
    box-shadow:0 5px 12px rgba(156,113,36,0.2);
}

.text-area{
    display:block;
    width:100%;
    min-height:128px;
    resize:vertical;
    padding:13px;
    color:#2f443f;
    background:rgba(255,255,255,0.9);
    border:1px solid rgba(160,129,53,0.3);
    border-radius:11px;
    outline:none;
    line-height:1.7;
}
.text-area:focus{border-color:var(--page-accent);box-shadow:0 0 0 3px rgba(216,182,87,0.13);}
.chip-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.chip{
    padding:8px 14px;
    color:#52625e;
    background:rgba(255,255,255,0.86);
    border:1px solid rgba(160,129,53,0.26);
    border-radius:18px;
    cursor:pointer;
}
.chip.active{color:#fff8d7;background:#a78031;border-color:#d9bb66;}

.upload-box{
    position:relative;
    display:flex;
    min-height:150px;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    color:#65736f;
    background:linear-gradient(145deg,rgba(255,255,255,0.92),rgba(239,235,216,0.84));
    border:1px dashed rgba(168,132,46,0.55);
    border-radius:15px;
    cursor:pointer;
}
.upload-box input{position:absolute;width:1px;height:1px;opacity:0;}
.upload-placeholder{text-align:center;line-height:1.8;}
.upload-symbol{display:block;color:#a68031;font-size:40px;line-height:1;}
.upload-preview{display:none;width:100%;max-height:290px;object-fit:contain;}
.upload-box.has-image .upload-placeholder{display:none;}
.upload-box.has-image .upload-preview{display:block;}
.privacy-note{margin-top:9px;color:var(--page-muted);font-size:12px;line-height:1.6;}

.submit-area{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px;}
.mystic-card .paid-analysis-product,
.mystic-card .paid-analysis-note,
.mystic-card .paid-analysis-status{
    margin-left:0;
    margin-right:0;
}
.primary-btn,.secondary-btn{
    width:100%;
    min-height:50px;
    border-radius:28px;
    font-family:KaiTi,"STKaiti",serif;
    font-size:17px;
    font-weight:bold;
    letter-spacing:4px;
    cursor:pointer;
}
.primary-btn{
    color:#b89441;
    background:#ffffff;
    border:2px solid #d4b874;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
}
.secondary-btn{
    color:#745821;
    background:linear-gradient(#fffdf0,#f7e8a8);
    border:1px solid #d2ac53;
    box-shadow:0 5px 13px rgba(109,76,23,0.16);
}
.primary-btn:active,.secondary-btn:active{transform:translateY(1px);}

.result-card{display:none;}
.result-card.show{display:block;animation:result-in .3s ease both;}
@keyframes result-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.result-head{display:flex;align-items:center;gap:12px;margin-bottom:13px;}
.result-symbol{
    display:flex;
    width:52px;
    height:52px;
    flex:0 0 52px;
    align-items:center;
    justify-content:center;
    color:#b89441;
    background:#ffffff;
    border:1px solid #d4b874;
    border-radius:50%;
    font-family:KaiTi,"STKaiti",serif;
    font-size:24px;
    font-weight:bold;
}
.result-title{color:var(--page-deep);font-size:19px;font-weight:bold;}
.result-subtitle{margin-top:4px;color:#98752c;font-size:13px;}
.result-body{color:#4f605c;font-size:14px;line-height:1.85;}
.result-body strong{color:#8b681e;}
.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:12px;}
.result-metric{padding:11px;background:rgba(242,235,207,0.58);border:1px solid var(--page-line);border-radius:11px;}
.metric-label{color:#6f7b78;font-size:12px;}
.metric-value{margin-top:4px;color:#8b681e;font-size:18px;font-weight:bold;}
.disclaimer{
    margin:15px 2px 10px;
    padding:12px 14px;
    color:rgba(255,255,255,0.88);
    background:rgba(8,32,29,0.72);
    border:1px solid rgba(220,194,105,0.25);
    border-radius:11px;
    font-size:12px;
    line-height:1.85;
    text-align:center;
}
.form-error{display:none;margin:0 0 10px;color:#a33e32;font-size:13px;text-align:center;}
.form-error.show{display:block;}

/* ===== Page Tabs (Mystic Theme) ===== */
.page-tabs{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    align-items:stretch;
    padding:0 14px;
    margin-top:8px;
    gap:0;
}
.page-tabs .page-tab{
    flex:1;
    padding:12px 10px 11px;
    margin:0;
    border:1px solid var(--page-line);
    border-right:0;
    background:var(--page-card);
    color:var(--page-muted);
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
    text-align:center;
    letter-spacing:1px;
}
.page-tabs .page-tab:first-child{
    border-radius:14px 0 0 14px;
}
.page-tabs .page-tab:last-child{
    border-right:1px solid var(--page-line);
    border-radius:0 14px 14px 0;
}
.page-tabs .page-tab.active{
    background:#faf6e8;
    color:#b89441;
    font-weight:bold;
    border-color:#d4b874;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

/* Legacy span-based tabs */
.page-tabs span.page-tab,
.page-tabs span[class=""]{
    flex:1;
    padding:12px 10px 11px;
    border:1px solid var(--page-line);
    border-right:0;
    background:var(--page-card);
    color:var(--page-muted);
    font-size:14px;
    cursor:pointer;
    text-align:center;
}
.page-tabs span.page-tab.active,
.page-tabs span.active{
    background:#faf6e8;
    color:#b89441;
    font-weight:bold;
    border-color:#d4b874;
}

body[data-theme="sky"]{
    --page-deep:#174e72;
    --page-mid:#4d96bd;
    --page-accent:#d2b75e;
    --page-accent-light:#fff3b9;
    --page-text:#24495d;
    --page-muted:#6e8792;
    --page-card:rgba(248,254,255,0.93);
    --page-line:rgba(117,166,190,0.3);
    --page-shadow:0 14px 36px rgba(19,77,109,0.22);

}
body[data-theme="sky"] .mystic-header{
    background:#ffffff;
}
body[data-theme="sky"] .mystic-hero{
    background:linear-gradient(145deg,#ffffff,#f8fbfd);
}
body[data-theme="sky"] .primary-btn{background:#ffffff;border:2px solid #4d96bd;color:#174e72;}
body[data-theme="sky"] .result-symbol{background:#ffffff;border:1px solid #4d96bd;color:#174e72;}

body[data-theme="gold"]{
    --page-deep:#795622;
    --page-mid:#b98d43;
    --page-accent:#b98836;
    --page-accent-light:#fff1af;
    --page-text:#53452d;
    --page-muted:#887b63;
    --page-card:rgba(255,253,239,0.95);
    --page-line:rgba(177,133,55,0.32);
    --page-shadow:0 14px 36px rgba(112,78,25,0.2);
}
body[data-theme="gold"] .mystic-header{
    background:#ffffff;
}
body[data-theme="gold"] .mystic-hero{
    background:linear-gradient(145deg,#ffffff,#fdf8e8);
}
body[data-theme="gold"] .primary-btn{background:#ffffff;border:2px solid #b98d43;color:#795622;}
body[data-theme="gold"] .result-symbol{background:#ffffff;border:1px solid #b98d43;color:#795622;}

body[data-theme="jade"]{
    --page-deep:#0d3d2e;
    --page-mid:#2a6b54;
    --page-accent:#3d8b6f;
    --page-accent-light:#a8e6c8;
    --page-text:#1a3a2f;
    --page-muted:#5e7a6e;
    --page-card:rgba(248,253,250,0.94);
    --page-line:rgba(61,139,111,0.28);
    --page-shadow:0 14px 36px rgba(13,61,46,0.2);
}
body[data-theme="jade"] .mystic-header{
    background:#ffffff;
}
body[data-theme="jade"] .mystic-hero{
    background:linear-gradient(145deg,#ffffff,#f4faf7);
}
body[data-theme="jade"] .primary-btn{background:#ffffff;border:2px solid #2a6b54;color:#0d3d2e;}
body[data-theme="jade"] .result-symbol{background:#ffffff;border:1px solid #2a6b54;color:#0d3d2e;}

@media screen and (max-width:414px){
    .mystic-content{padding:12px 10px 0;}
    .mystic-hero{min-height:0;height:auto;padding:12px 12px;}
    .mystic-kicker{font-size:20px;letter-spacing:4px;}
    .mystic-card{margin-top:12px;padding:16px 13px;border-radius:17px;}
    .field-row{gap:8px;padding:8px 9px;}
    .field-label{width:64px;flex-basis:64px;font-size:13px;}
    .choice-btn{min-width:58px;padding:0 14px;}
    .date-grid{gap:5px;}
    .field-control{font-size:13px;}
    .calendar-hint{gap:7px;padding-right:9px;padding-left:9px;}
    .calendar-hint-value{font-size:12px;}
}

@media (prefers-reduced-motion:reduce){
    .result-card.show{animation:none;}
    .primary-btn:active,.secondary-btn:active{transform:none;}
}