:root { --community-ink: #13313b; --community-teal: #007c78; --community-sun: #f0b44b; --community-paper: #f4f0e7; }

.home-workspace { padding: 1.25rem 0 2.5rem; background: linear-gradient(135deg, #e7f2ed 0%, #f7f3e9 50%, #e8eff2 100%); }
.home-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 1rem; align-items: start; }
.community-panel, .home-featured-panel { background: rgba(255,255,255,.9); border: 1px solid #c9d8d5; box-shadow: 0 10px 24px rgba(19,49,59,.12); }
.community-panel { min-height: 0; display: grid; grid-template-rows: auto minmax(150px, 320px) auto; }
.community-panel-header, .home-featured-head { padding: .85rem 1.1rem .7rem; border-bottom: 1px solid #d8e3df; }
.community-panel-header { display: block; }
.community-panel h1, .home-featured-head h2 { color: var(--community-ink); margin: .1rem 0 0; font-family: "Noto Sans Thai", sans-serif; font-size: 1.4rem; line-height: 1.3; letter-spacing: 0; }
.community-panel-header p, .home-featured-head p { margin: .3rem 0 0; color: #527078; font-size: .9rem; }
.community-presence { justify-self: start; text-align: left; }
.community-facebook-login { margin-top: .45rem; border: 0; background: transparent; color: #1967b3; padding: 0; font: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; }
.community-feed { min-height: 150px; max-height: 320px; overflow-y: auto; padding: .8rem 1.15rem; display: grid; align-content: start; gap: .3rem; background: #fff; }
.community-message { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: end; max-width: 84%; gap: .45rem; padding: .12rem 0; }
.community-avatar { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: #d7ebe7; color: #155c5b; font: 700 .78rem "DM Sans", sans-serif; }
.community-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.community-message-content { min-width: 0; }
.community-message-meta { display: flex; gap: .4rem; align-items: baseline; min-height: 1rem; padding: 0 .25rem; color: #657d84; font-size: .68rem; }
.community-message-meta strong { color: var(--community-ink); font-size: .75rem; }
.community-report { margin-left: auto; padding: 0; border: 0; background: none; color: #7f6662; font: inherit; font-size: .66rem; text-decoration: underline; cursor: pointer; }
.community-message p { width: fit-content; max-width: 100%; margin: .08rem 0 0; padding: .42rem .65rem; border-radius: 1rem; background: #edf1f1; color: #233d45; font-size: .86rem; line-height: 1.35; overflow-wrap: anywhere; }
.community-message.is-own { grid-template-columns: minmax(0, 1fr); justify-self: end; }
.community-message.is-own .community-avatar { display: none; }
.community-message.is-own .community-message-meta { justify-content: flex-end; }
.community-message.is-own .community-message-meta strong { display: none; }
.community-message.is-own p { margin-left: auto; background: #1477d4; color: #fff; }
.community-read-receipt { display: block; margin-top: .12rem; color: #6c838a; font-size: .66rem; text-align: right; }
.community-compose { padding: 1rem 1.35rem 1.2rem; background: #f7faf8; border-top: 1px solid #d8e3df; }
.community-identity { display: grid; grid-template-columns: 8rem 1fr; align-items: center; gap: .6rem; margin-bottom: .65rem; color: #47646b; font-size: .84rem; }
.community-compose input { min-width: 0; border: 1px solid #bcd0ca; background: #fff; color: var(--community-ink); padding: .65rem .7rem; font: inherit; }
.community-send { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .45rem; }
.community-send:has(.community-emoji-picker:not([hidden])) { grid-template-columns: auto minmax(0, 1fr) auto; }
.community-emoji-picker { position: relative; }
.community-emoji-picker summary { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; list-style: none; color: #e5a740; cursor: pointer; font-size: 1.3rem; }
.community-emoji-picker summary::-webkit-details-marker { display: none; }
.community-emoji-picker[hidden] { display: none; }
.community-send button { min-width: 5.5rem; border: 0; background: var(--community-teal); color: #fff; font: 700 .9rem "Noto Sans Thai", sans-serif; cursor: pointer; }
.community-login-link { display: inline-flex; align-items: center; min-height: 2.2rem; margin-top: .55rem; padding: 0 .75rem; border: 1px solid #0b7773; color: #006f6b; font: 700 .82rem "Noto Sans Thai", sans-serif; text-decoration: none; }
.community-login-link.line-sign-in { gap: .45rem; border-color: #06a94f; background: #06a94f; color: #fff; }
.community-login-link .line-sign-in-mark { display: inline-grid; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: 4px; background: #fff; color: #06a94f; font: 800 .5rem/1 sans-serif; letter-spacing: .02em; }
.community-login-link:hover, .community-login-link:focus-visible { background: #e4f0ed; }
.community-login-link.line-sign-in:hover, .community-login-link.line-sign-in:focus-visible { background: #058f43; }
.community-emoji-tray { position: absolute; z-index: 2; bottom: calc(100% + .35rem); left: 0; display: grid; grid-template-columns: repeat(5, 2.2rem); gap: .18rem; width: max-content; padding: .4rem; border: 1px solid #c9d8d5; background: #fff; box-shadow: 0 8px 18px rgba(19,49,59,.16); }
.community-emoji-tray button { width: 2.2rem; height: 2.2rem; min-width: 0; border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; }
.community-emoji-tray button:hover, .community-emoji-tray button:focus-visible { background: #e4f0ed; }
.home-featured-panel { min-width: 0; }
.home-featured-grid { display: grid; max-height: 572px; gap: .75rem; overflow-y: auto; padding: 1rem; }
.home-featured-card { position: relative; min-height: 0; padding: .65rem .65rem 1.2rem; background: #fff !important; box-shadow: 5px 7px 0 rgba(19,49,59,.16); transform: rotate(.28deg); }
.home-featured-card::before { position: absolute; z-index: 2; top: -.42rem; left: 50%; width: 4.5rem; height: 1.05rem; content: ""; background: rgba(232,207,143,.82); transform: translateX(-50%) rotate(-2deg); }
.home-featured-card .property-image { min-height: 245px; border: .45rem solid #fff; border-bottom-width: .9rem; box-shadow: 0 2px 7px rgba(19,49,59,.18); transform: rotate(-.35deg); }
.home-featured-card .property-content { padding: .7rem .25rem 0; }
.home-featured-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .75rem; }
.home-featured-all { display: inline-flex; align-self: end; color: #006f6b; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.home-featured-details { display: none; }
.home-featured-details { margin-top: .35rem; color: #527078; font-size: .78rem; }
.home-featured-details summary { cursor: pointer; color: #40636a; font-weight: 700; }
.home-featured-details p { margin: .35rem 0 0; line-height: 1.4; }
.home-stream-section { padding: 0 0 3rem; background: #f7faf8; }
.home-stream-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 2.2rem 0 1rem; border-bottom: 1px solid #c9d8d5; }
.home-stream-head h2 { margin: .15rem 0; color: var(--community-ink); font: 700 1.55rem "Noto Sans Thai", sans-serif; letter-spacing: 0; }
.home-stream-head p { margin: 0; color: #527078; }
.home-stream-all { color: #006f6b; font-weight: 700; white-space: nowrap; }
.home-listing-stream { display: grid; gap: .7rem; padding-top: 1rem; }
.home-stream-item { display: grid; grid-template-columns: 172px minmax(0, 1fr) minmax(140px, auto) auto; align-items: center; gap: 1rem; padding: .7rem; border: 1px solid #d2dfdb; background: #fff; box-shadow: 0 3px 9px rgba(19,49,59,.06); }
.home-stream-image { position: relative; min-height: 108px; border: .35rem solid #fff; border-bottom-width: .85rem; background: #e6eeea center / cover no-repeat; box-shadow: 2px 3px 0 rgba(19,49,59,.16); transform: rotate(-.45deg); }
.home-stream-image::after { position: absolute; top: -.55rem; left: 50%; width: 3.1rem; height: .7rem; content: ""; background: rgba(177,211,198,.78); transform: translateX(-50%) rotate(2deg); }
.home-stream-item:nth-child(even) .home-stream-image { transform: rotate(.4deg); }
.home-stream-item:nth-child(3n) .home-stream-image::after { background: rgba(238,198,174,.8); }
.home-stream-image span { position: absolute; top: .55rem; left: .55rem; background: #fff; color: #23434b; padding: .2rem .45rem; font-size: .72rem; font-weight: 700; }
.home-stream-copy { min-width: 0; }
.home-stream-copy p, .home-stream-copy span { margin: 0; color: #587078; font-size: .83rem; }
.home-stream-copy h3 { margin: .28rem 0; color: var(--community-ink); font: 700 1.1rem "Noto Sans Thai", sans-serif; letter-spacing: 0; overflow-wrap: anywhere; }
.home-stream-item > strong { color: #126b68; font: 700 1rem "Noto Sans Thai", sans-serif; text-align: right; }
.home-stream-item .text-link-btn { justify-self: end; border: 1px solid #0b7773; background: #fff; color: #076b67; padding: .55rem .7rem; font: 700 .84rem "Noto Sans Thai", sans-serif; cursor: pointer; white-space: nowrap; }
@media (max-width: 860px) { .home-workspace { padding: 0; background: #fff; } .home-workspace .container { width: 100%; max-width: none; padding: 0; } .home-workspace-grid { display: block; } .community-panel { min-height: calc(100dvh - 72px); height: calc(100dvh - 72px); border: 0; box-shadow: none; grid-template-rows: auto minmax(0, 1fr) auto; } .community-panel-header { padding: .5rem .85rem; } .community-panel h1 { margin: 0; font-size: 1rem; line-height: 1.2; } .community-feed { min-height: 0; max-height: none; padding: .5rem .75rem; gap: .16rem; } .community-message { max-width: 91%; gap: .35rem; padding: .08rem 0; } .community-avatar { width: 1.8rem; height: 1.8rem; font-size: .7rem; } .community-message p { padding: .38rem .58rem; font-size: .82rem; } .community-message-meta { font-size: .62rem; } .community-message-meta strong { font-size: .7rem; } .community-compose { padding: .5rem .7rem calc(.5rem + env(safe-area-inset-bottom)); } .community-login-note { display: none; } .community-send { grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: .25rem; } .community-send input { min-height: 2.45rem; padding: .45rem .6rem; border-radius: 1.3rem; font-size: .84rem; } .community-send button { min-width: 2.9rem; min-height: 2.45rem; padding: 0 .55rem; border-radius: 1.3rem; font-size: .8rem; } .community-emoji-picker summary { width: 2.2rem; height: 2.45rem; font-size: 1.22rem; } .community-emoji-tray { grid-template-columns: repeat(5, 2rem); } .community-emoji-tray button { width: 2rem; height: 2rem; } .community-login-link { display: inline-flex; padding: .35rem .55rem; font-size: .76rem; } .home-featured-panel { border-left: 0; border-right: 0; box-shadow: none; } .home-featured-head { display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem; } .home-featured-head .eyebrow,.home-featured-details { display: none; } .home-featured-head h2 { margin: 0; font-size: 1rem; line-height: 1.2; } .home-featured-all { margin: 0 0 0 auto; font-size: .78rem; white-space: nowrap; } .home-featured-grid { max-height: 430px; padding: .75rem; } .home-featured-card .property-image { min-height: 210px; } .home-stream-head { align-items: start; flex-direction: column; } .home-stream-item { grid-template-columns: 142px minmax(0, 1fr) auto; } .home-stream-item > strong { grid-column: 2; text-align: left; } .home-stream-item .text-link-btn { grid-column: 3; grid-row: 1 / span 2; } }
@media (max-width: 520px) { .home-featured-head h2, .home-stream-head h2 { font-size: 1.18rem; } .home-featured-head { padding-left: 1rem; padding-right: 1rem; } .home-featured-card .property-image { min-height: 210px; } .home-stream-section { padding-bottom: 1.5rem; } .home-stream-head { padding-top: 1.5rem; } .home-stream-item { grid-template-columns: 96px minmax(0, 1fr); gap: .7rem; padding: .55rem; } .home-stream-image { min-height: 92px; grid-row: 1 / span 2; } .home-stream-copy h3 { font-size: .95rem; } .home-stream-item > strong { grid-column: 2; font-size: .88rem; } .home-stream-item .text-link-btn { grid-column: 2; grid-row: auto; justify-self: start; padding: .35rem .5rem; font-size: .76rem; } }

@media (max-width: 860px) { .community-panel { min-height: 0; height: auto; border: 1px solid #c9d8d5; background: #fff; grid-template-rows: auto minmax(150px, 320px) auto; } .community-feed { min-height: 150px; max-height: 320px; } .community-send { grid-template-columns: minmax(0, 1fr) auto; } .community-send:has(.community-emoji-picker:not([hidden])) { grid-template-columns: auto minmax(0, 1fr) auto; } }