*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a0a;--bg-card: #12121a;--bg-card-hover: #1c1c28;--gold: #c9a84c;--gold-dim: #8b7224;--gold-glow: #dbb85c;--text: #e8dcc8;--text-dim: #9a8e7a;--text-muted: #6a5e4a;--red: #b33a3a;--red-dim: #8a2a2a;--border: #2a2a35;--shadow: rgba(0,0,0,.5);--font-title: "Noto Serif SC", "KaiTi", serif;--font-body: "Noto Serif SC", "STSong", serif;--font-mono: "Courier New", monospace;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}html,body{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);font-family:var(--font-body);display:flex;justify-content:center;align-items:stretch;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;-webkit-user-select:none}#app{width:100%;max-width:480px;position:relative;overflow:hidden;display:flex;flex-direction:column;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;transform:translateY(12px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}.screen.active{opacity:1;pointer-events:auto;transform:translateY(0);z-index:1}.screen.slide-left{transform:translate(-30px)}.screen.slide-right{transform:translate(30px)}.screen::-webkit-scrollbar{width:3px}.screen::-webkit-scrollbar-track{background:transparent}.screen::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:2px}.header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:16px;min-height:56px;background:linear-gradient(180deg,rgba(10,10,10,.98) 60%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-title{font-family:var(--font-title);font-size:20px;color:var(--gold);flex:1;text-align:center}.header-back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:22px;cursor:pointer;border-radius:50%;transition:background .2s;flex-shrink:0}.header-back:active{background:#c9a84c26}.header-right{width:36px;flex-shrink:0}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 32px;min-height:48px;font-family:var(--font-title);font-size:18px;color:var(--gold);background:var(--bg-card);border:1px solid var(--gold-dim);border-radius:4px;cursor:pointer;transition:all .2s;text-decoration:none;gap:8px}.btn:active{background:var(--bg-card-hover);color:var(--gold-glow)}.btn-primary{background:linear-gradient(135deg,#2a1a0a,#3a2a1a);border-color:var(--gold)}.btn-primary:active{background:linear-gradient(135deg,#3a2a1a,#4a3a2a)}.btn-small{padding:8px 20px;font-size:15px;min-height:36px}.btn-full{width:100%}.btn-danger{color:var(--red);border-color:var(--red-dim)}.bottom-nav{display:flex;align-items:stretch;justify-content:space-around;background:#0a0a0afa;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--border);padding:4px 0 calc(4px + var(--safe-bottom));flex-shrink:0;position:sticky;bottom:0;z-index:10}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;min-width:56px;color:var(--text-muted);font-size:11px;font-family:var(--font-title);cursor:pointer;transition:color .2s;border:none;background:none;-webkit-tap-highlight-color:transparent}.nav-item .nav-icon{font-size:22px;line-height:1}.nav-item.active{color:var(--gold)}.nav-item:active{color:var(--gold-dim)}.ceremony-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#050508;transition:opacity .5s}.ceremony-overlay.fade-out{opacity:0;pointer-events:none}.ceremony-canvas{display:block}.ceremony-text{font-family:var(--font-title);color:var(--gold);text-align:center;transition:opacity .8s}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:4px;padding:16px;margin:8px 16px;transition:background .2s}.card:active{background:var(--bg-card-hover)}.card-title{font-family:var(--font-title);font-size:16px;color:var(--gold);margin-bottom:8px}.card-text{font-size:15px;color:var(--text-dim);line-height:1.7}.hex-line{height:6px;border-radius:3px;background:var(--gold);margin:3px 0}.hex-line.yin{background:transparent;border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);height:12px}.hex-line.moving{background:var(--red)}.hex-line.yin.moving{border-color:var(--red)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(.85)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}.fade-in{animation:fadeIn .5s ease both}.delay-1{animation-delay:.2s}.delay-2{animation-delay:.4s}.delay-3{animation-delay:.6s}.text-gold{color:var(--gold)}.text-dim{color:var(--text-dim)}.text-muted{color:var(--text-muted)}.text-red{color:var(--red)}.text-center{text-align:center}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.p-16{padding:16px}.px-16{padding-left:16px;padding-right:16px}.gap-8{gap:8px}.gap-16{gap:16px}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.tag{display:inline-block;padding:2px 10px;border-radius:2px;font-size:12px;background:#c9a84c1f;color:var(--gold);border:1px solid rgba(201,168,76,.2)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 32px;text-align:center;flex:1}.empty-state .icon{font-size:48px;margin-bottom:16px;opacity:.4}.empty-state .title{font-size:18px;color:var(--text-dim);margin-bottom:8px}.empty-state .desc{font-size:14px;color:var(--text-muted);line-height:1.6}.loading-dots{display:inline-flex;gap:4px}.loading-dots span{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 1.2s infinite}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}