:root { --community-panel:#181e2c; --community-panel-alt:#111724; --community-line:#35415a; --community-violet:#a48aff; --community-orange:#ff9f5a; --community-green:#63d6a0; --community-muted:#aab3c5; }
.community-library-media { position:relative; display:grid; min-height:150px; overflow:hidden; border:1px solid var(--community-line); background:#24203b; }.community-library-media.sound { place-items:center; background:#283a4b; color:#f2eaff; font-size:25px; font-weight:900; }.community-library-media img { width:100%; height:100%; min-height:150px; object-fit:cover; }.community-library-media .community-library-image { border:0; }.community-library-lock { position:absolute; right:9px; top:9px; border:1px solid #ff9f5a; background:#21170f; color:#ffd3b3; padding:4px 7px; font-size:11px; font-weight:900; }.community-locked-copy { color:#ffbd89; font-size:11px; line-height:1.35; }.community-library-card button:disabled { border-color:#4b5365; background:#202632; color:#9ca5b7; cursor:not-allowed; opacity:1; }
.community-submission-form { max-width:760px; border:1px solid var(--community-line); background:var(--community-panel); padding:18px; }.community-submission-form textarea.community-field { resize:vertical; }
.community-shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:44px 0 74px; }
.community-entry-strip { display:flex; align-items:center; justify-content:center; gap:18px; padding:9px 20px; border-bottom:1px solid #3d3760; background:#211d35; color:#e8e2ff; font-size:13px; }.community-entry-strip div { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }.community-entry-strip span { color:#c5bddc; }.community-entry-strip a { display:inline-flex; align-items:center; min-height:30px; padding:4px 10px; border:1px solid #a48aff; color:#fff; font-weight:900; text-decoration:none; }
.community-hero { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); gap:22px; align-items:stretch; }
.community-panel { min-width:0; border:1px solid var(--community-line); border-radius:7px; background:var(--community-panel); padding:22px; }
.community-panel h1,.community-panel h2,.community-panel h3 { margin:0; color:#fff; letter-spacing:0; }
.community-panel h1 { font-size:clamp(31px,4vw,48px); line-height:1.08; }
.community-panel h2 { font-size:22px; }.community-panel h3 { font-size:17px; }
.community-copy { margin:14px 0 0; color:var(--community-muted); line-height:1.72; }
.community-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.community-button { display:inline-flex; min-height:41px; align-items:center; justify-content:center; border:1px solid transparent; border-radius:5px; padding:8px 13px; background:var(--community-orange); color:#21100d; font-weight:900; text-decoration:none; cursor:pointer; }
.community-button.secondary { border-color:var(--community-line); background:transparent; color:#fff; }.community-button.success { background:var(--community-green); color:#0d251b; }.community-button.danger { background:#ff7e8a; color:#321012; }
.community-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:18px; }.community-stat { border:1px solid var(--community-line); background:var(--community-panel-alt); padding:15px; }.community-stat span { display:block; color:var(--community-muted); font-size:12px; }.community-stat strong { display:block; margin-top:6px; color:#fff; font-size:25px; }
.community-section { margin-top:22px; }.community-section-head { display:flex; justify-content:space-between; align-items:end; gap:14px; margin-bottom:12px; }.community-section-head p { margin:6px 0 0; color:var(--community-muted); font-size:13px; }
.community-list { display:grid; gap:9px; }.interaction-row { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:13px; align-items:center; border:1px solid var(--community-line); background:var(--community-panel-alt); padding:11px; }.interaction-thumb { display:grid; place-items:center; width:72px; aspect-ratio:1; overflow:hidden; border:1px solid var(--community-line); background:#25203c; color:#d9ceff; font-weight:900; }.interaction-thumb img { width:100%; height:100%; object-fit:cover; }.interaction-row p { margin:4px 0 0; color:var(--community-muted); font-size:13px; line-height:1.5; }.interaction-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:7px; color:#ced5e2; font-size:12px; }.community-badge { display:inline-flex; align-items:center; min-height:23px; border:1px solid var(--community-line); padding:2px 7px; color:#d9ceff; font-size:11px; font-weight:900; }.community-notice { border-left:4px solid var(--community-violet); background:#171d2a; padding:13px 15px; color:#e0e5f0; line-height:1.55; }.community-notice.error { border-left-color:#ff7e8a; }.community-notice.success { border-left-color:var(--community-green); }
.community-table { width:100%; border-collapse:collapse; font-size:13px; }.community-table th,.community-table td { border-bottom:1px solid var(--community-line); padding:10px; text-align:left; vertical-align:top; }.community-table th { color:var(--community-muted); font-size:11px; text-transform:uppercase; }.community-table td { color:#e6eaf2; }.community-empty { padding:26px; border:1px dashed var(--community-line); color:var(--community-muted); text-align:center; }
.community-form { display:grid; gap:11px; }.community-field { width:100%; min-height:40px; border:1px solid var(--community-line); background:#101522; color:#fff; padding:8px 10px; }.community-field:focus { outline:0; border-color:var(--community-violet); }.community-field-label { display:grid; gap:5px; color:#dfe4ee; font-size:13px; font-weight:800; }.community-muted { color:var(--community-muted); }.community-status { color:var(--community-green); font-weight:900; }.community-status.paused,.community-status.offline { color:var(--community-orange); }.community-status.maintenance { color:#ff7e8a; }
.overlay-stage { position:fixed; inset:0; overflow:hidden; background:transparent; font-family:"Noto Sans Thai","Segoe UI",sans-serif; }.overlay-event { position:absolute; width:min(560px,42vw); transform:translate(-50%,-50%); border:2px solid rgba(255,255,255,.72); background:rgba(12,15,24,.88); box-shadow:0 18px 50px rgba(0,0,0,.48); padding:22px; color:#fff; text-align:center; opacity:0; transition:opacity .28s ease,transform .28s ease; pointer-events:none; }.overlay-event.visible { opacity:1; transform:translate(-50%,-50%) scale(1); }.overlay-event img { display:block; width:min(220px,100%); max-height:180px; margin:0 auto 13px; object-fit:contain; }.overlay-event h1 { margin:0; font-size:30px; }.overlay-event p { margin:7px 0 0; color:#dfe4ef; font-size:18px; }.overlay-event.hidden { display:none; }
@media (max-width:780px) { .community-shell { width:min(100% - 28px,1180px); padding-top:26px; }.community-hero { grid-template-columns:1fr; }.community-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.interaction-row { grid-template-columns:52px minmax(0,1fr); }.interaction-row .community-button { grid-column:1/-1; }.interaction-thumb { width:52px; }.community-table { display:block; overflow-x:auto; white-space:nowrap; }.overlay-event { width:min(86vw,560px); } }
@media (max-width:580px) { .community-entry-strip { align-items:flex-start; justify-content:space-between; gap:10px; }.community-entry-strip span { display:none; } }
.overlay-event .overlay-message { margin:0 auto 14px; max-width:100%; padding:9px 12px; border-left:3px solid var(--community-violet); background:#171d2a; color:#ffffff; font-size:18px; font-weight:800; line-height:1.45; }

.community-member-header { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; padding-bottom:19px; border-bottom:1px solid var(--community-line); }
.community-member-header h1 { margin:0; color:#fff; font-size:clamp(30px,4vw,44px); line-height:1.12; }
.community-member-nav { display:flex; flex-wrap:wrap; gap:6px; }
.community-member-nav a { display:inline-flex; align-items:center; min-height:38px; border-bottom:2px solid transparent; color:var(--community-muted); font-size:14px; font-weight:900; padding:0 8px; text-decoration:none; }
.community-member-nav a:hover,.community-member-nav a[aria-current="page"] { border-bottom-color:var(--community-orange); color:#fff; }
.community-steps { margin:15px 0 0; padding-left:20px; color:var(--community-muted); line-height:1.75; }
.community-steps li + li { margin-top:6px; }
.community-account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.community-account-card { display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--community-line); background:var(--community-panel-alt); padding:14px; }
.community-account-card strong,.community-account-card span { display:block; }.community-account-card strong { color:#fff; }.community-account-card span { margin-top:4px; color:var(--community-muted); font-size:13px; }
.community-icon-button { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--community-line); border-radius:50%; background:transparent; color:var(--community-muted); cursor:pointer; font-size:18px; line-height:1; }
.community-icon-button:hover { border-color:#ff7e8a; color:#fff; }
.community-library-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.community-library-link { display:grid; gap:6px; min-height:126px; border:1px solid var(--community-line); background:var(--community-panel); color:#fff; padding:20px; text-decoration:none; }
.community-library-link:hover { border-color:var(--community-orange); background:#1d2433; }.community-library-link span { font-size:20px; font-weight:900; }.community-library-link small { color:var(--community-muted); font-size:13px; line-height:1.55; }
.community-library-link.sound span { color:var(--community-orange); }.community-library-link.image span { color:var(--community-violet); }
.community-library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.community-library-card { display:grid; gap:14px; border:1px solid var(--community-line); background:var(--community-panel); padding:15px; }
.community-library-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.community-library-card-head h3 { margin:0; color:#fff; font-size:17px; }.community-library-card-head p { margin:5px 0 0; color:var(--community-muted); font-size:13px; line-height:1.55; }
.community-library-card audio { width:100%; min-height:36px; }.community-library-image { display:block; width:100%; aspect-ratio:16 / 9; border:1px solid var(--community-line); background:var(--community-panel-alt); object-fit:contain; }
.community-library-card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--community-muted); font-size:12px; }.community-library-card-footer .community-button { flex:0 0 auto; }
@media (max-width:780px) { .community-member-header { align-items:flex-start; flex-direction:column; }.community-account-grid,.community-library-links,.community-library-grid { grid-template-columns:1fr; } }
@media (max-width:480px) { .community-library-card-footer { align-items:stretch; flex-direction:column; }.community-library-card-footer .community-button { width:100%; } }

.community-member-nav-wrap { display:grid; justify-items:end; gap:7px; }.community-switch-link { color:var(--community-orange); font-size:13px; font-weight:900; text-decoration:none; }
.community-profile-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.community-profile-tabs form { min-width:0; margin:0; }.community-profile-tab { display:grid; grid-template-columns:46px minmax(0,1fr) auto; width:100%; min-height:80px; align-items:center; gap:11px; border:1px solid var(--community-line); border-radius:6px; background:var(--community-panel-alt); color:#fff; padding:12px; text-align:left; font:inherit; cursor:pointer; }.community-profile-tab:hover { border-color:var(--community-orange); background:#1d2433; }.community-profile-tab.active { border-color:var(--community-violet); background:#24203a; cursor:default; }.community-profile-tab img,.community-profile-avatar-placeholder { display:grid; width:46px; height:46px; place-items:center; border:1px solid var(--community-line); border-radius:6px; background:#28203f; color:#f3eefe; object-fit:cover; font-size:17px; font-weight:900; }.community-profile-tab span { display:grid; min-width:0; gap:2px; }.community-profile-tab small { color:var(--community-orange); font-size:11px; font-weight:900; }.community-profile-tab strong { overflow:hidden; color:#fff; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }.community-profile-tab em { overflow:hidden; color:var(--community-muted); font-size:12px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }.community-profile-tab b { color:#d8ccff; font-size:12px; text-align:right; white-space:nowrap; }
.community-active-profile { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.7fr); gap:16px; border:1px solid var(--community-line); background:var(--community-panel); padding:18px; }.community-active-profile-main { display:flex; align-items:center; gap:14px; min-width:0; }.community-active-profile-main img { width:68px; height:68px; flex:0 0 auto; border:1px solid var(--community-line); border-radius:6px; object-fit:cover; }.community-active-profile h2,.community-active-profile h3 { margin:0; color:#fff; }.community-active-profile p { margin:5px 0 0; color:var(--community-muted); font-size:13px; line-height:1.55; }.community-checkin { display:flex; align-items:center; justify-content:space-between; gap:14px; border-left:1px solid var(--community-line); padding-left:16px; }.community-checkin form { margin:0; }.community-help { grid-column:1 / -1; margin:0; border-top:1px solid var(--community-line); padding-top:13px; color:var(--community-muted); font-size:12px; line-height:1.6; }.community-help a { color:var(--community-orange); font-weight:900; }
@media (max-width:780px) { .community-member-nav-wrap { justify-items:start; }.community-profile-tabs,.community-active-profile { grid-template-columns:1fr; }.community-checkin { border-top:1px solid var(--community-line); border-left:0; padding-top:14px; padding-left:0; } }
@media (max-width:480px) { .community-profile-tab { grid-template-columns:40px minmax(0,1fr); }.community-profile-tab img,.community-profile-avatar-placeholder { width:40px; height:40px; }.community-profile-tab b { grid-column:2; text-align:left; }.community-checkin { align-items:flex-start; flex-direction:column; }.community-checkin .community-button { width:100%; } }