*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,sans-serif;background:linear-gradient(180deg,#fff 0%,#fff7d6 100%);color:#222;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

.phone{max-width:430px;margin:0 auto;padding:16px 16px 100px}
.page-title{font-size:22px;font-weight:800;margin-bottom:16px}

.hero,.card,.notice,.chat-box{border-radius:28px;padding:20px;margin-bottom:16px;box-shadow:0 10px 25px rgba(0,0,0,.08)}
.hero{background:#111827;color:#fff;text-align:center}
.hero.compact{padding:24px 20px;text-align:left;display:flex;align-items:center;gap:16px}
.hero.compact .logo{width:56px;height:56px;font-size:28px;margin:0;flex-shrink:0}
.hero.compact .hero-text{flex:1}
.logo{width:90px;height:90px;background:#facc15;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:900;color:#111827}
h1,h2,h3,p{margin:0}
.sub{opacity:.8;font-size:14px;margin-top:6px}

button{border:0;border-radius:18px;padding:16px;font-weight:800;transition:transform .15s,opacity .15s}
button:active{transform:scale(.97)}
.install{background:#facc15;color:#111827;width:100%;margin-top:14px;font-size:16px}
.install-guide{margin-top:12px;padding:12px 14px;background:rgba(255,255,255,.12);border-radius:14px;font-size:13px;line-height:1.6;text-align:left}
.install-guide p{margin:0}
@media (min-width:768px){#installBtn{display:none!important}#installGuide{display:none!important}}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.gold{background:#facc15;color:#111827}
.dark{background:#111827;color:#fff}
.white{background:#fff7d6;color:#111827}
.card{background:#fff}
.notice{background:#111827;color:#fff}
.notice .card-head{align-items:flex-end;margin-bottom:4px}
.notice .card-head h2{margin:0;font-size:18px}
.notice-more{display:inline-block;padding:6px 12px;border-radius:999px;background:rgba(250,204,21,.15);color:#facc15;font-size:12px;font-weight:800}
.notice-item{background:rgba(255,255,255,.08);padding:14px;border-radius:18px;margin-top:12px}
.notice-item button{width:100%;margin-top:10px;background:#facc15;color:#111827}
.notice-item p{color:#ddd;margin-top:8px;font-size:14px;line-height:1.5}
.notice-date{font-size:12px;color:#aaa;margin-top:6px}

.member-scroll{display:flex;gap:12px;overflow-x:auto;padding:4px 0 8px;margin-top:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.member-scroll::-webkit-scrollbar{display:none}
.member-marquee{overflow:hidden;margin-top:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.member-scroll-track{display:flex;width:max-content;animation:member-marquee 28s linear infinite}
.member-marquee:hover .member-scroll-track{animation-play-state:paused}
.member-scroll-inner{display:flex;gap:12px;padding:4px 0 8px;flex-shrink:0}
@keyframes member-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.member-chip{flex-shrink:0;text-align:center;width:72px}
.member-avatar{width:56px;height:56px;border-radius:50%;background:#facc15;color:#111827;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;margin:0 auto 6px}
.member-name{font-size:12px;font-weight:600}

.member-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.member-row{display:flex;align-items:center;gap:14px;padding:14px;background:#fff7d6;border-radius:18px}
.member-row .member-avatar{width:48px;height:48px;font-size:16px;margin:0}
.member-info{flex:1}
.member-info b{display:block;font-size:15px}
.member-info span{font-size:13px;color:#666;margin-top:2px;display:block}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#111827;color:#fff}
.badge.gold{background:#facc15;color:#111827}

.chat-box{background:#fff;padding:0;overflow:hidden;display:flex;flex-direction:column;height:calc(100vh - 200px);min-height:420px}
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:78%;padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.5;word-break:break-word}
.msg.other{background:#fff7d6;border-bottom-left-radius:4px;align-self:flex-start}
.msg.mine{background:#111827;color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.msg .sender{font-size:11px;font-weight:700;margin-bottom:4px;opacity:.7}
.msg .time{font-size:10px;margin-top:4px;opacity:.5;text-align:right}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid #eee;background:#fafafa}
.chat-input input{flex:1;border:2px solid #eee;border-radius:14px;padding:12px 14px;font-size:14px;outline:none}
.chat-input input:focus{border-color:#facc15}
.chat-input button{padding:12px 18px;background:#facc15;color:#111827;flex-shrink:0}

.fee-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.fee-stat{background:#111827;color:#fff;border-radius:18px;padding:16px;text-align:center}
.fee-stat.gold{background:#facc15;color:#111827}
.fee-stat .num{font-size:28px;font-weight:900;margin-top:4px}
.fee-stat .label{font-size:12px;opacity:.8}
.fee-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
.fee-table th,.fee-table td{padding:12px 8px;text-align:left;border-bottom:1px solid #eee}
.fee-table th{font-size:12px;color:#666;font-weight:600}
.status-paid{color:#16a34a;font-weight:700}
.status-unpaid{color:#dc2626;font-weight:700}

.section-label{font-size:13px;color:#666;margin:20px 0 10px;font-weight:600}

.bottom{position:fixed;left:50%;transform:translateX(-50%);bottom:10px;background:#fff;border-radius:22px;padding:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:calc(100% - 24px);max-width:410px;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:100}
.bottom a,.bottom button{display:block;text-align:center;padding:10px 4px;background:#fff7d6;font-size:12px;font-weight:800;border-radius:14px;color:#222}
.bottom .active{background:#111827;color:#fff}

.empty-state{text-align:center;padding:40px 20px;color:#888}
.empty-state .icon{font-size:48px;margin-bottom:12px}

.form{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:13px;font-weight:600;color:#555}
.field input,.field select,.field textarea{border:2px solid #eee;border-radius:14px;padding:12px 14px;font-size:15px;font-family:inherit;outline:none;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#facc15}
.check-field{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.check-field input{width:18px;height:18px}

.alert{padding:12px 14px;border-radius:14px;font-size:14px;font-weight:600;margin-bottom:12px}
.alert.ok{background:#dcfce7;color:#166534}
.alert.err{background:#fee2e2;color:#991b1b}

.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.btn-sm{display:inline-block;padding:8px 14px;border-radius:12px;font-size:12px;font-weight:800;text-align:center}
.btn-link{display:block;text-align:center;padding:14px;border-radius:18px;font-weight:800}
.menu-btn{display:block;text-align:center;padding:16px;border-radius:18px;font-weight:800}
.admin-menu{margin-top:14px}
.back-link{text-align:center;margin-top:8px;font-size:14px;font-weight:600}
.back-link a{color:#555}
.member-row.inactive{opacity:.55}
.err-btn{background:#fee2e2;color:#991b1b}

.month-nav{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:18px;padding:12px 16px;margin-bottom:16px;box-shadow:0 4px 15px rgba(0,0,0,.06);font-weight:800}
.month-nav a{font-size:14px;color:#111827;padding:6px 10px;background:#fff7d6;border-radius:12px}

.fee-check-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.fee-check-row{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;padding:12px;background:#fff7d6;border-radius:14px;font-size:14px}
.fee-check-row input{width:20px;height:20px}
.fee-check-name{font-weight:700}
.fee-check-amt{font-weight:600;color:#555}
.fee-check-date{grid-column:2/4;font-size:11px;color:#16a34a}
.install-log{margin:12px 0 0;padding-left:20px;font-size:14px;line-height:1.8}

.chat-user-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:#fff;border-radius:18px;margin-bottom:16px;box-shadow:0 4px 15px rgba(0,0,0,.06);font-size:13px;font-weight:600}
.chat-user-bar a{padding:6px 12px;background:#fff7d6;border-radius:12px;font-size:12px}
a.menu-btn,button.menu-btn{display:block;text-align:center;padding:16px;border-radius:18px;font-weight:800;border:0}

.chat-date-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.chat-date-row{display:flex;align-items:center;gap:10px;padding:12px;background:#fff7d6;border-radius:14px}
.chat-date-label{flex:1;font-weight:700;font-size:14px}
.chat-date-cnt{font-size:13px;color:#666}

.fee-table .member-id-label{display:block;font-size:11px;color:#888;font-weight:600;margin-top:2px}