@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');
:root{font-family:"DM Sans","Noto Sans TC",system-ui,sans-serif;color:#272b31;background:#f7f5f0;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}a{color:inherit}h1,h2,h3,p{margin-top:0}[hidden]{display:none!important}.muted{color:#92939a}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;color:#aaa6a2}.eyebrow.orange{color:#d87d63}.logo{display:flex;align-items:center;gap:10px;color:#292c31;font-size:24px;font-weight:800;letter-spacing:-.06em}.logo-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#e97860;color:#fff;font-size:31px;line-height:1;padding-bottom:6px;box-shadow:0 7px 15px #dd8c783f}.logo-dot{color:#ed795e}.primary{border:0;background:#ee7c61;color:#fff;border-radius:13px;padding:12px 18px;font-weight:800;box-shadow:0 7px 15px #e98c7540;transition:.15s}.primary:hover{background:#e56c51;transform:translateY(-1px)}.primary.wide{width:100%;display:flex;justify-content:space-between}.ghost{border:1px solid #e8e4df;background:#fff;color:#54545c;border-radius:11px;padding:9px 13px;font-weight:700}.ghost:hover{background:#faf6f1}.tiny{font-size:12px;padding:7px 10px}.form-error{color:#c9514d;font-size:13px;min-height:20px}.login-screen{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#fff}.login-art{position:relative;overflow:hidden;min-height:640px;background:#f2e5d0}.login-art:before{content:"";position:absolute;width:650px;height:650px;border:1px solid #e6d8c4;border-radius:50%;top:-280px;left:-120px}.login-art:after{content:"";position:absolute;width:550px;height:550px;border:1px solid #e6d8c4;border-radius:50%;right:-250px;bottom:-300px}.sun{position:absolute;width:270px;height:270px;background:#f6bf8c;border-radius:50%;top:16%;right:16%;box-shadow:0 0 0 40px #f4d6b459}.house{position:absolute;width:300px;height:250px;top:35%;left:50%;transform:translateX(-50%);filter:drop-shadow(8px 18px 10px #956d5630)}.roof{position:absolute;width:232px;height:232px;top:-58px;left:34px;background:#e67b64;transform:rotate(45deg);border-radius:14px}.wall{position:absolute;background:#fff8ed;width:292px;height:190px;bottom:0;left:4px;border-radius:5px 5px 20px 20px}.door{position:absolute;width:66px;height:104px;background:#b98167;bottom:0;left:112px;border-radius:35px 35px 0 0}.door:after{content:"";position:absolute;width:7px;height:7px;background:#f9e6bb;border-radius:50%;top:56px;right:11px}.window{position:absolute;width:44px;height:44px;background:#9ac6bd;border:7px solid #e9b699;border-radius:50%;top:53px;right:33px}.art-copy{position:absolute;bottom:8%;left:12%;z-index:1}.art-copy h1{font-size:clamp(32px,4vw,62px);letter-spacing:-.05em;line-height:1.34;margin:16px 0}.art-copy p{color:#766d67}.login-panel{display:grid;place-items:center;padding:50px}.login-inner{width:min(100%,420px)}.login-inner .logo{margin-bottom:70px}.login-inner h2{font-size:36px;letter-spacing:-.05em;margin:8px 0}.login-inner .muted{line-height:1.8;margin-bottom:36px}.login-inner label{display:block;font-size:13px;font-weight:800;margin:20px 0 9px}.login-inner input,.login-inner select{width:100%;height:49px;border:1px solid #e2e3e5;border-radius:11px;padding:0 14px;background:#fff;color:#333}.login-inner .primary{margin-top:10px}.demo-note{margin-top:22px;font-size:12px;color:#999}.app{display:grid;grid-template-columns:244px minmax(0,1fr) 260px;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#fbfaf8;border-right:1px solid #e9e6e0;padding:29px 18px;display:flex;flex-direction:column}.sidebar .logo{padding:0 15px}.space-label{margin:50px 11px 13px;color:#b2aaa2;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.space-leaf{float:right;color:#e27f66}.main-nav{display:grid;gap:6px}.nav-item{border:0;background:transparent;color:#777a82;display:flex;align-items:center;gap:14px;text-align:left;width:100%;border-radius:12px;padding:13px 15px;font-size:14px;font-weight:700}.nav-item:hover{background:#f5f1ea}.nav-item.active{background:#fbeae4;color:#de745b}.nav-icon{display:inline-grid;place-items:center;width:21px;font-size:21px;line-height:1}.badge{min-width:19px;height:19px;padding:0 5px;border-radius:10px;display:inline-grid;place-items:center;margin-left:auto;background:#ef8064;color:#fff;font-size:10px}.sidebar-bottom{margin-top:auto}.privacy-note{border-radius:15px;background:#f3eee8;padding:15px;display:flex;gap:10px;color:#ba836f;margin-bottom:22px}.privacy-note>span{font-size:22px}.privacy-note strong{display:block;color:#6d625d;font-size:12px;margin-bottom:5px}.privacy-note small{display:block;color:#9d938c;font-size:11px;line-height:1.65}.profile-button{border:0;background:transparent;border-top:1px solid #eae7e2;width:100%;padding:18px 5px 0;display:flex;gap:10px;align-items:center;text-align:left}.profile-button strong,.profile-button small{display:block}.profile-button strong{font-size:13px}.profile-button small{color:#aaa;font-size:11px;margin-top:3px}.profile-more{margin-left:auto;color:#9a9a9a}.avatar{width:36px;height:36px;border-radius:12px;display:inline-grid;place-items:center;flex:none;color:#fff;font-weight:800;font-size:14px}.main{min-width:0;padding:35px 38px 50px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}.topbar h1{font-size:29px;letter-spacing:-.04em;margin:6px 0}.topbar .muted{font-size:13px;margin:0}.view{min-height:420px}.rightbar{border-left:1px solid #e9e6e0;padding:37px 22px;background:#faf9f6}.rightbar-head{padding-bottom:27px;border-bottom:1px solid #ebe6e0}.rightbar-head h2{font-size:20px;line-height:1.45;letter-spacing:-.04em;margin:17px 0 8px}.rightbar-head p{font-size:12px;color:#969196;line-height:1.7;margin:0}.rightbar-section{padding-top:24px}.rightbar-section h3{font-size:13px;margin-bottom:17px}.rightbar-section h3 span{font-weight:500;color:#aaa;margin-left:5px}.person-row{display:flex;align-items:center;gap:10px;margin:12px 0;font-size:12px;font-weight:700}.person-row small{display:block;color:#b1aeb0;font-weight:400;margin-top:2px}.tip-card{background:#f4e9db;border-radius:15px;padding:20px;margin-top:30px}.tip-icon{display:block;color:#dc8969;font-size:24px;margin-bottom:12px}.tip-card strong{font-size:13px}.tip-card p{font-size:11px;line-height:1.7;color:#94887e;margin:8px 0 0}.panel{background:#fff;border:1px solid #edeae5;border-radius:19px;box-shadow:0 7px 30px #5249360a}.chats-layout{display:grid;grid-template-columns:290px minmax(0,1fr);height:calc(100vh - 191px);min-height:520px;overflow:hidden}.chat-list{border-right:1px solid #eeeae5;overflow:auto}.list-heading{padding:20px;border-bottom:1px solid #f0ede9;display:flex;justify-content:space-between;align-items:center}.list-heading h2{font-size:14px;margin:0}.list-heading span{font-size:11px;color:#aaa}.chat-row{width:100%;border:0;background:#fff;display:flex;gap:11px;text-align:left;padding:17px 15px;border-bottom:1px solid #f5f3f0}.chat-row:hover,.chat-row.selected{background:#fdf5f0}.chat-row .avatar{border-radius:50%;width:41px;height:41px}.chat-copy{min-width:0;flex:1}.chat-copy strong{display:block;font-size:13px;margin:1px 0 5px}.chat-copy small{display:block;color:#a6a3a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.chat-time{font-size:10px;color:#aaa;white-space:nowrap}.chat-room{display:flex;flex-direction:column;min-width:0}.room-header{padding:18px 23px;border-bottom:1px solid #f0ede9;display:flex;gap:11px;align-items:center}.room-header .avatar{border-radius:50%}.room-header strong{font-size:14px}.room-header small{display:block;color:#aaa;font-size:11px;margin-top:3px}.messages{padding:23px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,#fff 0%,#fffdfb 100%)}.message{max-width:75%;display:flex;gap:8px;align-self:flex-start}.message.mine{align-self:flex-end;flex-direction:row-reverse}.message .avatar{width:27px;height:27px;border-radius:50%;font-size:11px}.bubble{padding:10px 13px;background:#f5f2ed;border-radius:4px 15px 15px 15px;font-size:13px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.mine .bubble{background:#eb846a;color:#fff;border-radius:15px 4px 15px 15px}.message-meta{font-size:10px;color:#aaa;margin:4px 2px}.mine .message-meta{text-align:right}.composer{border-top:1px solid #f0ede9;padding:15px;display:flex;gap:10px}.composer textarea{flex:1;min-width:0;border:1px solid #ece8e3;border-radius:12px;padding:12px 14px;outline:none}.composer textarea:focus,.form-control:focus{border-color:#e99982;box-shadow:0 0 0 3px #f9e6df}.composer button{min-width:67px}.empty-state{display:grid;place-items:center;text-align:center;padding:50px;color:#999}.empty-icon{display:grid;place-items:center;width:70px;height:70px;border-radius:22px;background:#faeee8;color:#e98369;font-size:32px;margin:auto auto 15px}.empty-state h3{color:#4d4a48;font-size:17px;margin:0 0 8px}.empty-state p{font-size:12px;line-height:1.7;max-width:240px}.section-note{font-size:12px;color:#a2a0a1;margin:0 0 20px}.cards{display:grid;gap:15px}.event-card{padding:21px;display:grid;grid-template-columns:62px 1fr;gap:18px}.date-tile{height:64px;border-radius:13px;background:#fff1ea;display:grid;place-items:center;align-content:center;color:#e47a5f}.date-tile strong{font-size:25px;line-height:1}.date-tile small{font-size:10px;font-weight:800}.card-main h2{font-size:16px;margin:2px 0 7px}.card-main p{font-size:12px;color:#969397;line-height:1.7;margin:0 0 10px}.meta-row{display:flex;gap:15px;flex-wrap:wrap;color:#969397;font-size:11px;margin-bottom:12px}.card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.avatars{display:flex;padding-left:6px}.avatars .avatar{width:25px;height:25px;border-radius:50%;border:2px solid white;margin-left:-6px;font-size:9px}.muted-small{font-size:11px;color:#a5a1a0}.rsvp{display:flex;gap:5px;flex-wrap:wrap}.rsvp button{border:1px solid #ece8e3;background:#fff;border-radius:8px;color:#888;padding:5px 8px;font-size:11px}.rsvp button.selected{border-color:#e98b72;background:#fff0eb;color:#d36a50}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:16px}.album-card{padding:0;overflow:hidden;text-align:left;border:1px solid #edeae5;background:#fff;border-radius:18px;box-shadow:0 7px 30px #5249360a;width:100%}.album-preview{height:142px;background:#f5e2cf;display:grid;place-items:center;color:#e79174;font-size:44px;position:relative;overflow:hidden}.album-preview img{width:100%;height:100%;object-fit:cover}.album-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#0000000e)}.album-body{padding:16px}.album-body h2{font-size:15px;margin:0 0 6px}.album-body p{font-size:11px;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 14px}.album-body .meta-row{margin:0}.album-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:20px}.album-detail-head h2{font-size:21px;margin:8px 0}.album-detail-head p{font-size:12px;color:#999}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:11px}.photo-card{border:0;padding:0;background:#eee;border-radius:11px;overflow:hidden;aspect-ratio:1;cursor:zoom-in}.photo-card img{width:100%;height:100%;object-fit:cover}.notice-row{width:100%;text-align:left;padding:17px;display:flex;align-items:center;gap:12px;border:0;border-bottom:1px solid #f1eeea;background:#fff}.notice-row:hover{background:#fff9f5}.notice-row.unread{background:#fff8f3}.notice-icon{width:38px;height:38px;border-radius:12px;background:#fceae2;color:#df8268;display:grid;place-items:center;font-size:20px;flex:none}.notice-copy{flex:1}.notice-copy strong{font-size:12px;display:block;margin-bottom:5px}.notice-copy small{color:#aaa;font-size:10px}.notice-dot{width:7px;height:7px;background:#ed7d61;border-radius:50%}.back-link{border:0;background:none;padding:0;color:#dc785f;font-size:12px;font-weight:800}.form-grid{display:grid;gap:15px}.form-grid label{display:grid;gap:7px;font-size:12px;font-weight:800;color:#555}.form-control{width:100%;border:1px solid #e6e3df;border-radius:10px;background:#fff;padding:11px 12px;outline:none;color:#333}.form-grid textarea{min-height:88px;resize:vertical}.people-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.person-choice{display:flex!important;align-items:center;gap:8px;border:1px solid #ece8e2;padding:10px;border-radius:10px;cursor:pointer}.person-choice:has(input:checked){border-color:#e98a70;background:#fff4ef}.person-choice input{accent-color:#e87c61}.person-choice .avatar{width:27px;height:27px;border-radius:50%;font-size:11px}.form-help{font-size:11px;color:#a6a0a0;line-height:1.6}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:9px}dialog{border:0;border-radius:20px;padding:0;width:min(94vw,500px);max-height:90vh;box-shadow:0 25px 80px #29221e3b}dialog::backdrop{background:#302b2a82;backdrop-filter:blur(2px)}.modal-wrap{padding:27px}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.modal-head h2{font-size:21px;margin:6px 0 0}.close{border:0;background:transparent;color:#999;font-size:24px;line-height:1}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(25px);opacity:0;pointer-events:none;background:#303038;color:#fff;border-radius:10px;padding:10px 15px;font-size:12px;transition:.2s;z-index:10}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.lightbox{max-width:min(90vw,900px);max-height:75vh;display:block;margin:auto}.lightbox-caption{text-align:center;color:#888;font-size:12px;margin:10px 0 0}
@media(max-width:1180px){.app{grid-template-columns:225px minmax(0,1fr)}.rightbar{display:none}.main{padding:30px}}@media(max-width:720px){.login-screen{grid-template-columns:1fr}.login-art{min-height:220px}.login-art .sun{width:120px;height:120px;top:-35px;right:10%}.login-art .house{transform:translateX(-50%) scale(.45);top:-25px}.art-copy{left:24px;bottom:16px}.art-copy h1{font-size:24px;margin:3px 0}.art-copy p{font-size:11px;margin:0}.art-copy .eyebrow{font-size:9px}.login-panel{padding:29px 23px}.login-inner .logo{margin-bottom:27px}.login-inner h2{font-size:27px}.app{display:block;padding-bottom:66px}.sidebar{position:fixed;z-index:5;top:auto;bottom:0;left:0;right:0;height:60px;padding:5px;background:#fff;border-top:1px solid #eee;border-right:0}.sidebar>.logo,.space-label,.sidebar-bottom{display:none}.main-nav{display:flex;justify-content:space-around;height:100%}.nav-item{width:auto;display:grid;gap:0;place-items:center;font-size:10px;padding:4px 9px;position:relative}.nav-icon{font-size:20px}.badge{position:absolute;right:0;top:0}.main{padding:24px 14px 10px}.topbar{align-items:flex-start;margin-bottom:22px}.topbar h1{font-size:22px}.topbar .muted{font-size:11px}.topbar .primary{padding:10px 11px;font-size:11px;white-space:nowrap}.chats-layout{grid-template-columns:118px minmax(0,1fr);height:calc(100dvh - 203px);min-height:390px}.chat-row{padding:11px 6px;gap:5px}.chat-row .avatar{width:25px;height:25px;font-size:10px}.chat-copy strong{font-size:10px}.chat-copy small,.chat-time,.list-heading span{display:none}.list-heading{padding:12px 7px}.list-heading h2{font-size:11px}.room-header{padding:10px}.room-header .avatar{width:29px;height:29px}.room-header small{font-size:9px}.messages{padding:10px}.message{max-width:95%}.message .avatar{display:inline-grid;width:30px;height:30px;font-size:12px}.bubble{font-size:11px;padding:8px 10px}.composer{padding:8px;gap:5px}.composer textarea{font-size:11px;padding:9px}.composer button{padding:8px;min-width:45px;font-size:11px}.event-card{padding:14px;grid-template-columns:48px 1fr;gap:10px}.date-tile{height:52px}.date-tile strong{font-size:21px}.card-main h2{font-size:14px}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.album-preview{height:100px}.album-body{padding:11px}.album-body h2{font-size:12px}.photo-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:380px){.topbar .primary{max-width:105px;white-space:normal}.chats-layout{grid-template-columns:95px minmax(0,1fr)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

.top-actions{display:flex;align-items:center;gap:9px}.top-actions #accountButton{display:none}@media(max-width:720px){.top-actions #accountButton{display:inline-flex;padding:9px 12px}}

/* Keep the app viewport fixed while preserving normal scrolling. */
*, *::before, *::after {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, [contenteditable="true"], [contenteditable=""] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  caret-color: #d8755b;
}
img { -webkit-user-drag: none; }
:where(button, a, input, select, textarea, [tabindex]):focus { outline: none; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #d8755b;
  outline-offset: 3px;
}
#modal:focus, .glass-panel:focus { outline: none; }
html, body { touch-action: pan-x pan-y; }
.toast.in-modal { position: relative; bottom: auto; left: auto; display: none; width: calc(100% - 32px); margin: 0 16px 16px; transform: none; text-align: center; pointer-events: auto; }
.toast.in-modal.show { display: block; transform: none; }
.push-status { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 13px 15px; font-size: 13px; }
.push-status-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: currentColor; }
.push-status--on { color: #23764a; background: #eaf6ee; }
.push-status--off { color: #966019; background: #fff3df; }
.push-status--blocked { color: #ae4748; background: #fff0ef; }
.primary.push-enable { background: #268454; box-shadow: 0 7px 15px #26845435; }
.primary.push-enable:hover { background: #1c7045; }
.primary.push-enable:focus-visible { outline-color: #268454; }
.ghost.push-disable { color: #ad4745; border-color: #e6bab5; background: #fff5f3; }
.ghost.push-disable:hover { background: #ffeae6; }
.ghost.push-disable:focus-visible { outline-color: #ad4745; }
.toast.push-on { background: #23764a; }
.toast.push-off { background: #ad4745; }
@media (max-width: 720px) {
  input, select, textarea { font-size: 16px; }
}

.message > div { min-width: 0; }
.message > .avatar { align-self: flex-start; object-fit: cover; }
.message .chat-image { max-width: 100%; }
.message .chat-image img { max-width: min(250px, 100%); height: auto; }

.composer textarea { height: 42px; min-height: 40px; max-height: 132px; resize: none; overflow-y: hidden; line-height: 1.4; margin: 0; }