:root { --wine:#260913; --red:#68152a; --gold:#e7bd6c; --cream:#fff8e9; --ink:#321518; }
* { box-sizing:border-box; }
body { margin:0; background:#18070d; color:var(--ink); font-family:"Noto Serif TC","Songti TC","STSong",serif; }
button,select { font:inherit; }
button { cursor:pointer; }
.page-shell { min-height:100vh; position:relative; overflow:hidden; padding:36px 14px 70px; background:radial-gradient(circle at 15% 20%,#7b2338 0,transparent 30%),radial-gradient(circle at 86% 60%,#5d1830 0,transparent 30%),linear-gradient(145deg,#19070d,#310a17 48%,#15060b); }
.ambient { position:fixed; border:1px solid #d9a75036; border-radius:50%; pointer-events:none; }
.ambient-one { width:420px;height:420px;left:-220px;top:-80px; }.ambient-two { width:600px;height:600px;right:-350px;bottom:-150px; }
.sparkles { position:fixed; color:#f4ce7b88; font-size:22px; top:12%; width:100%; text-align:center; letter-spacing:30px; }
.phone { width:min(100%, 460px); min-height:900px; margin:auto; border-radius:30px; overflow:hidden; position:relative; background:var(--cream); box-shadow:0 32px 100px #0009,0 0 0 1px #e7bd6c66, inset 0 0 40px #bd85401a; }
.hero { height:260px; position:relative; overflow:hidden; text-align:center; color:#fff5db; padding-top:62px; background:radial-gradient(circle at 50% 0,#9a3048 0,transparent 46%),linear-gradient(155deg,#591126,#270812 70%); }
.hero:before,.hero:after { content:"";position:absolute;inset:12px;border:1px solid #e8c77842;border-radius:22px;pointer-events:none; }.hero:after { inset:19px;border-color:#e8c7781c; }
.back,.more { position:absolute;z-index:2;top:18px;border:0;color:#f5d99a;background:transparent;font-size:32px;line-height:28px; }.back{left:24px}.more{right:23px;font-size:17px;letter-spacing:2px}
.hero h1 { margin:0;font-size:43px;line-height:1.05;letter-spacing:9px;text-shadow:0 5px 22px #0008;font-weight:700 }.hero h1 span{font-size:47px;color:#f4d58c;background:linear-gradient(#fff4c9,#d7a74e);background-clip:text;color:transparent}.hero p{font-size:12px;letter-spacing:4px;color:#e7cc9d;margin:13px 0 0}
.rules-btn{position:absolute;z-index:3;right:18px;bottom:18px;border:1px solid #d6ad62;color:#f6d98e;background:#2b0918aa;border-radius:16px;padding:7px 13px;font-size:10px;letter-spacing:1px;box-shadow:inset 0 0 0 1px #fff1bd1f}
.balloon{position:absolute;width:45px;height:61px;border-radius:55% 55% 50% 50%;border:1px solid #f0ca7859;opacity:.7}.balloon:after{content:"";position:absolute;left:22px;top:60px;height:80px;border-left:1px solid #e9c26e4d;transform:rotate(6deg)}.balloon-left{left:35px;top:105px;background:linear-gradient(135deg,#c27a62aa,#74223a88);transform:rotate(-12deg)}.balloon-right{right:27px;top:73px;background:linear-gradient(135deg,#efce7c88,#8e5c2588);transform:scale(.75) rotate(14deg)}
.mode-switch { height:56px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;color:#866b61;background:#fffaf0;border-bottom:1px solid #dbc79e66;font-size:12px}.mode-switch button{border:0;background:transparent;display:flex;align-items:center;gap:9px;color:#89766d}.mode-switch button b{font-weight:500}.mode-switch button.active b{color:#85213a}.mode-switch button i{display:block;width:34px;height:19px;background:#b8aaa2;border-radius:20px;padding:2px;transition:.2s}.mode-switch button.active i{background:#8d263e}.mode-switch button em{display:block;width:15px;height:15px;border-radius:50%;background:white;transition:.2s}.mode-switch button.active em{transform:translateX(15px)}
.tabs { display:flex;height:66px;background:#fffaf0;border-bottom:1px solid #dfc998 }.tabs button{position:relative;flex:1;border:0;background:transparent;color:#9a8379;font-size:15px;letter-spacing:2px}.tabs button.selected{color:#71162d;font-weight:700}.tabs button.selected:after{content:"✦";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:10px;color:#c38d39}.tabs button.selected:before{content:"";position:absolute;bottom:9px;left:calc(50% - 35px);width:70px;border-top:1px solid #c38d39}
.content{background:linear-gradient(#fffaf0,#f9efd9);padding:25px 18px}
.birthday-filter{display:flex;align-items:center;justify-content:flex-end;margin:0 4px 14px}.birthday-filter button{height:31px;display:flex;align-items:center;gap:7px;border:1px solid #d7bd8d;border-radius:16px;background:#fffaf0;color:#8f7467;padding:0 12px;font-size:10px}.birthday-filter button i{width:14px;height:14px;display:grid;place-items:center;border:1px solid #c7a56c;border-radius:4px;color:#fff;font:10px Arial}.birthday-filter button.selected{color:#792039;border-color:#b67c43;background:#f6e6c3}.birthday-filter button.selected i{background:#8c263f;border-color:#8c263f}
.ranking { border-radius:18px;overflow:hidden;border:1px solid #e7d6b5;background:#fffdf7;box-shadow:0 10px 30px #8b552816}.star-row{height:82px;display:flex;align-items:center;padding:0 12px 0 8px;border-bottom:1px solid #eee2cc;position:relative}.star-row:last-child{border:0}.rank{width:24px;font:italic 700 16px Georgia;color:#b69b7d}.rank-1{color:#c18b24}.rank-2{color:#8f8f8f}.rank-3{color:#a96342}.avatar-wrap{width:52px;height:52px;position:relative;margin-right:11px;border-radius:50%;padding:4px;background:repeating-conic-gradient(from -12deg,#f8df92 0 9deg,#9d2846 9deg 15deg,#f6c85e 15deg 26deg,#fff3bf 26deg 34deg);box-shadow:0 0 0 2px #f8e9bd,0 3px 10px #8b4c2526}.avatar-wrap:before{content:"";position:absolute;inset:2px;border:1px dotted #fff8d1;border-radius:50%;z-index:1;pointer-events:none}.avatar-wrap img{position:relative;z-index:2;width:100%;height:100%;border-radius:50%;object-fit:cover;border:1px solid #fff4cc}.crown{position:absolute;top:-18px;left:16px;color:#d89f37;z-index:5;font-size:17px;transform:rotate(-6deg);text-shadow:0 1px white}.identity{flex:1;min-width:0}.identity h3{font-size:15px;margin:0 0 5px;letter-spacing:1px}.identity p{font-size:10px;color:#9b7d70;margin:0}.identity p span{color:#c49747}.bless-btn{border:1px solid #bc8b46;border-radius:18px;color:#81223a;background:linear-gradient(#fffdf4,#f5e3bc);height:34px;padding:0 13px;font-size:11px;box-shadow:inset 0 0 0 2px #fff}.bless-btn span{font-size:14px;vertical-align:-1px}
.benefits-panel{min-height:500px;padding:27px 14px 40px}.benefits-profile{position:relative;overflow:hidden;text-align:left;border:1px solid #d7b064;border-radius:18px;background:linear-gradient(135deg,#5c1328,#2b0a15);color:#fff4da;box-shadow:0 12px 28px #6f292627}.benefits-profile:after{content:"✦";position:absolute;right:17px;top:15px;color:#ebca83;font-size:18px;opacity:.7}.profile-title{padding:9px 15px;border-bottom:1px solid #e8c77c40;color:#e9c57a;font-size:10px;letter-spacing:2px}.profile-title span{font-size:9px;margin-right:5px}.profile-main{display:flex;align-items:center;gap:11px;padding:15px}.profile-main img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid #e7bf6b;box-shadow:0 0 0 3px #ffffff16}.profile-name{flex:1}.profile-name h2{margin:0;color:#fff5dd;font-size:17px;letter-spacing:1px}.profile-name h2 b{display:inline-block;margin-left:5px;border:1px solid #d7ad5b;border-radius:8px;padding:2px 5px;color:#f5d07f;font:700 9px Arial}.profile-name p{margin:5px 0 0;color:#d5b9a6;font-size:10px;letter-spacing:1px}.profile-birthday{display:flex;align-items:center;gap:5px;color:#d6c1b2;font-size:9px;white-space:nowrap}.profile-birthday b{color:#f3d37e;font-size:12px}.profile-birthday button{width:24px;height:24px;border:1px solid #d3a75b;border-radius:50%;background:#fff6d915;color:#f5d78e;font-size:12px}.locked-profile{background:linear-gradient(135deg,#51333d,#2d1a24);border-color:#9b7980}.locked-profile:after{color:#c6abb0}.locked-profile .profile-title{color:#d4bec2}.locked-note{margin:0 15px 15px;padding:9px 11px;border-radius:10px;background:#ffffff0d;color:#cdb5b8;font-size:10px;line-height:1.6}.benefits-heading{display:flex;align-items:center;justify-content:center;gap:10px;margin:27px 0 15px;color:#c18d3c}.benefits-heading h2{margin:0;color:#591724;font-size:18px;letter-spacing:3px}.benefits-heading span{font-size:10px}.benefits-table-wrap{overflow:hidden;border:1px solid #dec498;border-radius:14px;background:#fffdf6;box-shadow:0 10px 22px #77502a18}.benefits-table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:center;font-size:10px;color:#76564d}.benefits-table th,.benefits-table td{border-right:1px solid #e5d5b9;border-bottom:1px solid #e5d5b9;padding:10px 4px;vertical-align:middle;line-height:1.55}.benefits-table tr>*:last-child{border-right:0}.benefits-table tbody tr:last-child>*{border-bottom:0}.benefits-table th{color:#641b2b;background:#f4e5c8;font-size:12px;letter-spacing:.5px}.benefits-table th:first-child{width:31%}.benefits-table td:first-child{color:#5c2430;font-size:11px}.benefits-table td:not(:first-child){color:#bb8030;font:700 21px Georgia}.benefits-table small{display:block;margin-top:4px;color:#795548;font:9px/1.5 "Noto Serif TC","Songti TC",serif}.benefits-table .icon-row td{padding-top:15px;padding-bottom:15px}.benefits-table td:nth-child(2) small,.benefits-table td:nth-child(3) small,.benefits-table td:nth-child(4) small{text-align:center}.benefits-table td:has(small){font-size:20px}
.benefits-showcase{margin-top:32px;padding:21px 12px 18px;border:1px solid #d7b064;border-radius:18px;background:linear-gradient(160deg,#531327,#290a14);box-shadow:0 14px 30px #6f292627;color:#fff5dc}.showcase-heading{display:flex;align-items:center;justify-content:center;gap:10px;color:#e1bb6b}.showcase-heading h2{margin:0;color:#f5d483;font-size:19px;letter-spacing:4px}.showcase-heading span{font-size:10px}.benefit-thumbnails{display:flex;justify-content:center;gap:7px;overflow-x:auto;margin:17px 0 14px;padding:2px 1px 6px;scrollbar-width:none}.benefit-thumbnails::-webkit-scrollbar{display:none}.benefit-thumbnails button{position:relative;flex:0 0 47px;width:47px;height:47px;overflow:hidden;border:1px solid #9e7040;border-radius:10px;background:#321018;color:#d8ae60;padding:0}.benefit-thumbnails button.active{border-color:#ffe39b;box-shadow:0 0 0 2px #c78e33,0 0 12px #e8bd5b77}.benefit-thumbnails img{width:100%;height:100%;object-fit:cover}.benefit-thumbnails span{display:grid;place-items:center;width:100%;height:100%;font-size:16px;background:radial-gradient(circle,#6d293d,#2b0a15)}.benefit-stage{position:relative;display:grid;place-items:center;min-height:205px;overflow:hidden;border:1px solid #e0ba6c9e;border-radius:14px;background:radial-gradient(circle at 50% 35%,#9d4b2844 0,transparent 50%),#210b12}.benefit-stage>img{display:block;width:100%;height:230px;object-fit:cover}.benefit-arrow{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:34px;height:34px;border:1px solid #e8c77a;border-radius:50%;background:#210b18d9;color:#ffe09b;font-size:27px;line-height:27px}.benefit-arrow.previous{left:10px}.benefit-arrow.next{right:10px}.benefit-blank{width:100%;height:205px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #b98650;border-radius:12px;color:#cda66e}.benefit-blank span{font-size:34px}.benefit-blank p{margin:9px 0 0;font-size:11px;letter-spacing:2px}.benefit-caption{text-align:center;padding:15px 6px 0}.benefit-caption h3{margin:0 0 7px;color:#f4d17e;font-size:15px;letter-spacing:2px}.benefit-caption p{margin:0;color:#dac1ac;font-size:11px;line-height:1.65}
.benefits-note{margin:13px 2px 0;color:#92786c;font-size:10px;line-height:1.8;text-align:left;letter-spacing:.2px}.benefits-note b{color:#71213a}
.modal-backdrop{position:fixed;inset:0;background:#19070dcc;backdrop-filter:blur(6px);z-index:20;display:grid;place-items:center;padding:20px}.modal{width:min(100%,390px);position:relative;text-align:center;border-radius:24px;background:linear-gradient(160deg,#fffdf5,#f7e7c9);padding:35px 28px 25px;box-shadow:0 30px 90px #000b,0 0 0 1px #ddb96b}.modal:before{content:"";position:absolute;inset:8px;border:1px solid #b78a462d;border-radius:18px;pointer-events:none}.modal-icon{width:48px;height:48px;display:grid;place-items:center;margin:-58px auto 20px;border-radius:50%;background:linear-gradient(#d5ad5b,#8b5c26);color:#fff5cf;font-size:23px;border:4px solid #f8eacb}.close{position:absolute;top:13px;right:16px;border:0;background:none;color:#9d8579;font-size:24px}.modal h2{font-size:23px;letter-spacing:3px;color:#561621;margin:5px 0 9px}.modal-copy{font-size:11px;line-height:1.7;color:#92796f}.date-fields{display:flex;gap:12px;margin:22px 0 24px}.date-fields label{position:relative;text-align:left;flex:1;font-size:9px;color:#9f8475}.date-fields select{margin-top:6px;width:100%;height:49px;border:1px solid #ddc49b;border-radius:9px;background:#fffaf0;color:#5d1b27;padding:0 36px 0 15px;font-size:16px;appearance:none}.date-fields label span{position:absolute;right:15px;bottom:16px;font-size:11px;color:#96725c}.modal-actions{display:flex;gap:12px}.modal-actions button{flex:1;height:43px;border-radius:24px;letter-spacing:2px}.confirm{border:0;color:#fff0c9;background:linear-gradient(90deg,#511020,#922c43,#511020);box-shadow:0 8px 17px #67152c3d}.cancel{border:1px solid #9f704e;background:#fff9eb;color:#72233a}.toast{position:fixed;z-index:50;left:50%;bottom:30px;transform:translateX(-50%);white-space:nowrap;background:#240a12e8;color:#f7dd9b;border:1px solid #c79c58;border-radius:22px;padding:11px 19px;font-size:12px;box-shadow:0 10px 30px #0008}
.rules-modal{padding-top:38px;max-height:min(82vh,680px);display:flex;flex-direction:column}.rules-content{list-style:decimal outside;margin:20px 0 0;padding:15px 12px 15px 36px;overflow-y:auto;text-align:left;border:1px solid #dcc69c;border-radius:14px;background:#fffaf085;color:#75554c;scrollbar-width:thin;scrollbar-color:#bd9156 transparent}.rules-content li{display:list-item;padding:0 4px 14px 5px;font-size:11px;line-height:1.8}.rules-content li:last-child{padding-bottom:0}.rules-content li::marker{color:#8e263d;font-weight:700}
@media(max-width:520px){.page-shell{padding:0;background:#1a070d}.phone{width:100%;min-height:100vh;border-radius:0}.hero{height:260px}.phone{box-shadow:none}.owner-card{width:100%}.sparkles,.ambient{display:none}}
.avatar-initial,.profile-avatar{display:grid;place-items:center;color:#fff7d8;background:linear-gradient(135deg,#7e2440,#f3c76b);font-weight:700}
.avatar-wrap .avatar-initial{position:relative;z-index:2;width:100%;height:100%;border-radius:50%;border:1px solid #fff4cc;font-size:15px}
.profile-main .profile-avatar{width:54px;height:54px;border-radius:50%;border:2px solid #e7bf6b;box-shadow:0 0 0 3px #ffffff16;font-size:21px}
[hidden]{display:none!important}