:root{--pri:#E54D42;--gold:#C8923A;--wd:#5CB85C;--fr:#E54D42;--ea:#E8985A;--mt:#C8923A;--wt:#4A90E2;--bg0:#FFD1C7;--bg1:#FFC8B5;--bg2:#FFF8F0;--bg3:#fff5f0}
*{box-sizing:border-box;margin:0;padding:0}
/* legacy body → scoped */
.app-page{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 30%,var(--bg2) 60%,var(--bg3) 100%);
  min-height:100vh;color:#333;-webkit-font-smoothing:antialiased;
}
.container{max-width:500px;margin:0 auto;padding:20px 14px 40px}
.header{text-align:center;padding:24px 0 16px}
.header .sub{font-size:12px;color:rgba(0,0,0,0.35);margin-top:4px}
.card{
  background:#fff;border-radius:16px;padding:20px;margin-bottom:14px;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
}
.card h2{font-size:16px;font-weight:600;margin-bottom:12px;color:#333;display:flex;align-items:center;gap:8px}
.card h3{font-size:14px;font-weight:600;margin:14px 0 8px;color:#555}
.card h4{font-size:13px;font-weight:600;color:#333;margin-bottom:4px}
.card p.dim{font-size:12px;color:#aaa;margin-bottom:14px}

/* Tabs */
.tabs{display:flex;gap:0;margin-bottom:14px;background:#f5f0eb;border-radius:10px;padding:3px}
.tab{flex:1;text-align:center;padding:10px 0;border-radius:8px;font-size:13px;cursor:pointer;color:#888;transition:all 0.15s}
.tab.active{background:#fff;color:var(--pri);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,0.06)}

/* Form */
.fg{margin-bottom:12px}
.fg label{display:block;font-size:12px;color:#999;margin-bottom:4px;font-weight:500}
.fg input,.fg select{width:100%;padding:12px 14px;border:1.5px solid #e8e0d8;border-radius:10px;font-size:15px;outline:none;background:#fdfaf7}
.fg input:focus,.fg select:focus{border-color:var(--pri)}
.fr{display:flex;gap:10px}.fr .fg{flex:1}
.btn{width:100%;padding:14px;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer}
.btn-pri{background:var(--pri);color:#fff}.btn-pri:active{opacity:0.85}

/* Pentagram */
.penta{display:flex;justify-content:center;gap:8px;margin:16px 0;flex-wrap:wrap}
.pb{text-align:center;min-width:44px}
.pb .f{height:120px;width:28px;border-radius:14px;margin:0 auto 6px;position:relative;background:#f0ebe5;overflow:hidden}
.pb .fi{position:absolute;bottom:0;left:0;right:0;border-radius:14px;transition:height 0.6s ease}
.pb .l{font-size:11px;color:#888}
.pb .v{font-size:13px;font-weight:700;margin-top:2px}

/* Stats */
.stats2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.st2{padding:14px 10px;border-radius:10px;background:#fdf8f5;text-align:center}
.st2 .v{font-size:20px;font-weight:700}
.st2 .l{font-size:11px;color:#999;margin-top:2px}
.st2 .d{font-size:11px;color:#bbb;margin-top:2px;line-height:1.5}

/* Bazi table */
.bzt{width:100%;border-collapse:collapse;font-size:13px;margin:10px 0}
.bzt th{background:#fdf8f5;padding:10px 6px;font-weight:600;font-size:11px;color:#999}
.bzt td{text-align:center;padding:10px 6px;border-bottom:1px solid #f5f0eb}
.bzt td strong{font-size:16px}
.bzt .el{font-size:11px;color:#aaa}

/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.tag{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500}
.tg{background:#E6FFE8;color:#388E3C}
.tw{background:#FFECEC;color:var(--pri)}
.tb{background:#E6F0FF;color:var(--wt)}
.to{background:#FFF8E6;color:var(--ea)}

/* Risk */
.rk{padding:14px;border-radius:12px;margin-bottom:10px;border-left:4px solid}
.rk.r1{background:#FFF0ED;border-color:var(--fr)}
.rk.r2{background:#FFF8E6;border-color:var(--ea)}
.rk.r3{background:#E6F0FF;border-color:var(--wt)}
.rk h4{font-size:14px;margin-bottom:6px}
.rk p.x{font-size:12px;color:#888;margin-bottom:6px;line-height:1.6}
.rk ul{list-style:none;padding:0}
.rk li{font-size:12px;color:#666;padding:2px 0}
.rk li::before{content:'· ';color:var(--pri)}

/* Suggest */
.sr{display:flex;gap:8px;margin-bottom:10px}
.si{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.sb{flex:1}
.sb .t{font-size:14px;font-weight:600;margin-bottom:4px}
.sb .i{font-size:12px;color:#666;line-height:1.8}
.sb .r{font-size:11px;color:#aaa;margin-top:2px}
.sg{background:#E6FFE8}.sr2{background:#FFECEC}.sbl{background:#E6F0FF}.so{background:#FFF8E6}

/* Score */
.sc{display:flex;align-items:center;gap:10px;padding:8px 0}
.sl{font-size:13px;width:40px;text-align:right}
.sb2{flex:1;height:8px;border-radius:4px;background:#f0ebe5;overflow:hidden}
.sf{height:100%;border-radius:4px;transition:width 0.4s ease}
.sv{font-size:13px;font-weight:600;width:32px}

/* Quote */
.qt{background:linear-gradient(135deg,#FFF8F0,#FFECEC);border-radius:12px;padding:16px;text-align:center;margin:10px 0}
.qt .t{font-size:15px;font-weight:600;color:var(--pri);font-style:italic}
.qt .e{font-size:12px;color:#888;margin-top:6px;line-height:1.6}

/* Organ stars */
.or{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #f5f0eb}
.or:last-child{border-bottom:none}
.on{font-size:13px;width:30px}
.os2{color:var(--gold);font-size:14px;letter-spacing:2px}
.os2 .off{color:#ddd}

/* Meridian */
.mer{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:10px 0}
.mi{font-size:11px;padding:6px 8px;border-radius:8px;background:#fdf8f5;text-align:center}
.mi .t2{font-weight:600;font-size:12px}
.mi .o2{font-size:10px;color:#999;margin-top:1px}

/* WYLQ table */
.wlt{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0}
.wlt td{padding:8px 6px;border-bottom:1px solid #f5f0eb}
.wlt td:first-child{color:#999;white-space:nowrap}
.wlt td:last-child{font-weight:500}

/* Interaction */
.inter{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.iv{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:500}
.iv.good{background:#E6FFE8;color:#388E3C}
.iv.bad{background:#FFECEC;color:var(--pri)}
.iv.neut{background:#f5f0eb;color:#888}

.hidden{display:none!important}
.tip{font-size:11px;color:#ccc;text-align:center;margin-top:8px}