:root {
    --community-bg: #10163f;
    --community-surface: rgba(36, 43, 98, .78);
    --community-surface-strong: rgba(27, 33, 82, .94);
    --community-primary: #7c7bff;
    --community-primary-2: #8adfff;
    --community-accent: #ff9cdc;
    --community-gold: #ffe28a;
    --community-text: #f7f9ff;
    --community-muted: #c7d2ff;
    --community-danger: #ff6b9a;
    --community-success: #75e6c8;
    --community-line: rgba(153, 185, 255, .3);
    --community-radius-sm: 12px;
    --community-radius-md: 20px;
    --community-radius-lg: 32px;
    --community-shadow: 0 22px 60px rgba(0, 0, 0, .35);
    --community-container: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.community-body { min-height: 100vh; margin: 0; color: var(--community-text); background: var(--community-bg) url('/assets/community-v3/backgrounds/site-desktop.webp') center top / cover fixed; font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: var(--community-primary-2); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.community-header { position: sticky; top: 0; z-index: 100; display: grid; grid-template-columns: minmax(170px, 260px) minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 76px; padding: 8px clamp(14px, 2.5vw, 40px); border-bottom: 1px solid rgba(138, 223, 255, .25); background: rgba(9, 15, 54, .92); backdrop-filter: blur(18px); box-shadow: 0 8px 28px rgba(0,0,0,.28); }
.community-logo { display: block; line-height: 0; }
.community-logo img { display: block; width: min(250px, 100%); height: 58px; object-fit: contain; object-position: left center; }
.community-nav { display: flex; align-items: center; justify-content: center; gap: 4px; }
.community-nav a { display: inline-flex; align-items: center; gap: 5px; padding: 8px 9px; border-radius: 999px; color: var(--community-text); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.community-nav a:hover, .community-nav a:focus-visible { color: #fff; background: rgba(124,123,255,.28); outline: 2px solid rgba(138,223,255,.6); }
.community-nav img { width: 22px; height: 22px; object-fit: contain; }
.community-account { display: flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.community-account a, .community-account button { padding: 8px 12px; border: 1px solid rgba(255,156,220,.45); border-radius: 999px; color: #fff; background: rgba(124,123,255,.14); text-decoration: none; cursor: pointer; }
.community-account form { margin: 0; }
.community-account .community-icon-link { display: grid; width: 42px; height: 42px; padding: 8px; place-items: center; }
.community-icon-link img { width: 25px; height: 25px; }
.community-menu-toggle { display: none; }
.community-main { min-height: 65vh; }
.community-notice { position: relative; z-index: 5; width: min(var(--community-container), calc(100% - 32px)); margin: 16px auto 0; padding: 13px 18px; border: 1px solid var(--community-gold); border-radius: var(--community-radius-sm); color: #26224d; background: #fff0b7; font-weight: 800; }
.community-home-shell, .community-page-shell { width: min(var(--community-container), calc(100% - 32px)); margin-inline: auto; }
.community-page-shell { display: grid; gap: 22px; margin-block: 28px 56px; }
.community-narrow { max-width: 980px; }

.community-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 20px; border: 1px solid var(--community-primary-2); border-radius: 999px; color: #fff; background: rgba(60,73,145,.92); text-decoration: none; cursor: pointer; transition: transform .18s ease, filter .18s ease, background .18s ease; }
.community-button:hover, .community-button:focus-visible { transform: translateY(-1px); filter: brightness(1.1); outline: 2px solid rgba(255,255,255,.65); outline-offset: 2px; }
.community-button-primary { border-color: #ffc4e7; background: linear-gradient(135deg, #ec5eb7, #716df5); box-shadow: 0 8px 22px rgba(236,94,183,.25); }
.community-button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.community-panel { padding: clamp(18px, 3vw, 32px); border: 1px solid var(--community-line); border-radius: var(--community-radius-md); background: linear-gradient(145deg, rgba(31,39,96,.96), rgba(24,29,76,.94)); box-shadow: var(--community-shadow); }
.community-panel h1, .community-panel h2 { margin-top: 0; color: var(--community-gold); }
.community-empty { color: var(--community-muted); }
.community-status-badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; color: #1d2b45; background: var(--community-gold); font-size: .78rem; font-weight: 800; white-space: nowrap; }

.community-hero-v3 { position: relative; min-height: 720px; margin: 24px 0 34px; overflow: hidden; border: 1px solid rgba(138,223,255,.24); border-radius: var(--community-radius-lg); box-shadow: var(--community-shadow); }
.community-hero-v3__background, .community-hero-v3__background img { position: absolute; inset: 0; width: 100%; height: 100%; }
.community-hero-v3__background img { object-fit: cover; }
.community-hero-v3__mascot { position: absolute; z-index: 2; left: 1%; bottom: -8%; width: 29%; height: 94%; object-fit: contain; object-position: bottom center; }
.community-hero-v3__welcome { position: absolute; z-index: 4; left: 22%; top: 8%; width: 18%; aspect-ratio: 560/480; }
.community-hero-v3__welcome > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.community-hero-v3__welcome p { position: absolute; inset: 25% 18% 18%; display: grid; place-items: center; margin: 0; color: #35224e; font-size: clamp(.72rem, 1.05vw, 1rem); font-weight: 800; line-height: 1.65; text-align: center; }
.community-hero-v3__center { position: absolute; z-index: 3; left: 31%; top: 8%; width: 43%; }
.community-hero-v3__title { display: block; width: 100%; height: 300px; object-fit: contain; }
.community-hero-actions-v3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: -12px; }
.community-hero-actions-v3 a { display: grid; min-height: 96px; grid-template-columns: 62px 1fr; grid-template-rows: 1fr 1fr; align-items: center; gap: 0 10px; padding: 12px 16px; border: 1px solid rgba(255,156,220,.65); border-radius: 20px; color: #fff; background: linear-gradient(145deg, rgba(36,44,105,.94), rgba(47,36,105,.88)); text-decoration: none; box-shadow: inset 0 0 18px rgba(138,223,255,.08); }
.community-hero-actions-v3 a:hover, .community-hero-actions-v3 a:focus-visible { transform: translateY(-2px); border-color: var(--community-gold); outline: 2px solid rgba(138,223,255,.55); }
.community-hero-actions-v3 img { grid-row: 1 / 3; width: 62px; height: 62px; object-fit: contain; }
.community-hero-actions-v3 span { align-self: end; color: #fff; font-weight: 900; }
.community-hero-actions-v3 small { align-self: start; color: var(--community-muted); }
.community-hero-v3__side { position: absolute; z-index: 3; top: 6%; right: 2%; display: grid; width: 25%; gap: 14px; }
.community-profile-frame, .community-progress-frame { position: relative; display: block; overflow: hidden; color: #fff; text-decoration: none; }
.community-profile-frame { aspect-ratio: 1440/840; }
.community-progress-frame { aspect-ratio: 1920/620; }
.community-frame-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.community-profile-frame__content { position: absolute; inset: 13% 11%; display: grid; grid-template-columns: 74px 1fr; align-content: center; align-items: center; gap: 5px 12px; }
.community-profile-frame__content .community-avatar { grid-row: 1 / 4; width: 74px; height: 74px; border: 2px solid var(--community-gold); border-radius: 50%; object-fit: contain; background: rgba(255,255,255,.08); }
.community-profile-frame__content > strong { font-size: 1.05rem; }
.community-profile-frame__content > span, .community-profile-frame__content p { margin: 0; color: var(--community-muted); font-size: .78rem; }
.community-profile-frame__content .community-button { grid-column: 1 / -1; min-height: 34px; padding: 5px 12px; }
.community-reward-row { grid-column: 1 / -1; display: flex; justify-content: space-around; padding-top: 6px; color: #fff; font-size: .78rem; }
.community-progress-frame__content { position: absolute; inset: 23% 11%; display: grid; gap: 5px; }
.community-progress-frame__content strong { color: var(--community-gold); }
.community-progress-frame__content progress { width: 100%; accent-color: var(--community-accent); }
.community-progress-frame__content small { color: var(--community-muted); }
.community-admin-shortcut { justify-self: center; padding: 8px 16px; border-radius: 999px; color: #fff; background: rgba(255,156,220,.25); text-decoration: none; }

.community-module-grid-v3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 48px; }
.community-module-v3 { position: relative; display: flex; min-height: 430px; flex-direction: column; gap: 16px; padding: 28px; overflow: hidden; border: 1px solid rgba(138,223,255,.34); border-radius: var(--community-radius-md); background: var(--community-surface-strong) url('/assets/community-v3/shared/module-panel-frame.webp') center / 100% 100% no-repeat; box-shadow: var(--community-shadow); }
.community-module-v3 > header { display: flex; align-items: center; gap: 12px; }
.community-module-v3 > header > img { width: 46px; height: 46px; }
.community-module-v3 h2 { margin: 0; color: var(--community-gold); font-size: 1.25rem; }
.community-module-v3 header p { margin: 2px 0 0; color: var(--community-muted); font-size: .85rem; }
.community-module-v3 > .community-button { align-self: flex-start; margin-top: auto; }
.community-room-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.community-room-mini-grid a { display: grid; gap: 5px; color: #fff; text-decoration: none; }
.community-room-mini-grid img { width: 100%; aspect-ratio: 16/9; border-radius: 10px; object-fit: cover; }
.community-room-mini-grid small { color: var(--community-muted); font-size: .72rem; }
.community-compact-list, .community-chat-summary, .community-task-summary, .community-announcement-list { display: grid; gap: 9px; }
.community-compact-list a { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.community-avatar-sm { width: 46px; height: 46px; border-radius: 50%; object-fit: contain; background: rgba(255,255,255,.08); }
.community-compact-list span { display: grid; }
.community-compact-list small { color: var(--community-muted); }
.community-chat-summary p { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; margin: 0; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.12); }
.community-chat-summary span { overflow: hidden; color: var(--community-muted); text-overflow: ellipsis; white-space: nowrap; }
.community-chat-summary time { color: var(--community-muted); font-size: .75rem; }
.community-task-summary > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
.community-task-summary > div > span { display: flex; justify-content: space-between; }
.community-task-summary progress { width: 100%; accent-color: var(--community-accent); }
.community-task-summary em { color: var(--community-gold); font-size: .75rem; font-style: normal; }
.community-layer-teaser { position: relative; align-self: center; width: min(260px, 75%); aspect-ratio: 1; }
.community-layer-teaser img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.community-announcement-list article { padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.12); }
.community-announcement-list p { display: -webkit-box; margin: 4px 0 0; overflow: hidden; color: var(--community-muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.community-page-header-v3 { display: flex; min-height: 190px; align-items: center; gap: 24px; padding: clamp(24px, 5vw, 54px); border: 1px solid var(--community-line); border-radius: var(--community-radius-md); background: rgba(28,35,86,.72) url('/assets/community-v3/shared/page-header-desktop.webp') center / cover no-repeat; box-shadow: var(--community-shadow); }
.community-page-header-v3 > img { width: 82px; height: 82px; object-fit: contain; }
.community-page-header-v3 > div { flex: 1; }
.community-page-header-v3 h1 { margin: 0; color: #fff; font-size: clamp(1.8rem, 4vw, 3.2rem); }
.community-page-header-v3 p { margin: 7px 0 0; color: var(--community-muted); }
.community-page-header-v3 > form { margin: 0; }
.community-filter-bar { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(150px, .35fr) minmax(140px, .3fr) auto; gap: 10px; padding: 16px; border: 1px solid var(--community-line); border-radius: var(--community-radius-md); background: var(--community-surface); }
.community-filter-bar input, .community-filter-bar select, .community-form-panel input, .community-form-panel select, .community-form-panel textarea { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid rgba(138,223,255,.5); border-radius: var(--community-radius-sm); color: #fff; background: rgba(10,17,57,.9); }
.community-filter-bar option, .community-form-panel option { color: #fff; background: #151c4f; }
.community-form-panel { display: grid; gap: 16px; padding: clamp(20px, 4vw, 38px); border: 1px solid var(--community-line); border-radius: var(--community-radius-md); background: var(--community-surface-strong); box-shadow: var(--community-shadow); }
.community-form-panel label { display: grid; gap: 7px; color: var(--community-gold); font-weight: 800; }
.community-form-panel small { color: var(--community-muted); font-weight: 400; }
.community-form-inline { margin-top: 20px; box-shadow: none; }
.community-validation { color: #ffd0e1; }
.community-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.community-action-row form { display: flex; gap: 8px; margin: 0; }
.community-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.community-card-heading h1, .community-card-heading h2 { margin: 0; }

.community-empty-state { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 220px; text-align: center; }
.community-empty-state img { width: min(250px, 60%); max-height: 180px; object-fit: contain; }
.community-empty-state h2, .community-empty-state p { margin: 0; }
.community-empty-state p { color: var(--community-muted); }
.community-room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.community-room-card { overflow: hidden; border: 1px solid var(--community-line); border-radius: var(--community-radius-md); background: var(--community-surface-strong); box-shadow: var(--community-shadow); }
.community-room-card > img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.community-room-card > div { display: grid; gap: 10px; padding: 18px; }
.community-room-card h2 { color: var(--community-gold); }
.community-room-card p { min-height: 3em; margin: 0; color: var(--community-muted); }
.community-room-card > div > span { color: var(--community-primary-2); font-size: .85rem; }
.community-room-card .community-button { justify-self: start; }
.community-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.community-pagination a { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--community-line); border-radius: 50%; color: #fff; background: var(--community-surface); text-decoration: none; }
.community-pagination a.is-current { color: #1c2253; background: var(--community-gold); }
.community-room-detail { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.community-room-detail > img { width: 100%; aspect-ratio: 16/9; border-radius: var(--community-radius-md); object-fit: cover; }
.community-room-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; }
.community-room-detail dt { color: var(--community-muted); }
.community-member-strip { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 8px; }
.community-member-strip a { display: grid; min-width: 90px; justify-items: center; gap: 6px; color: #fff; text-decoration: none; }
.community-member-strip img { width: 76px; height: 76px; border-radius: 50%; object-fit: contain; background: rgba(255,255,255,.08); }

.community-chat-panel { width: min(1100px, 100%); margin-inline: auto; padding: clamp(18px,3vw,30px); border: 1px solid var(--community-line); border-radius: var(--community-radius-md); background: var(--community-surface-strong); box-shadow: var(--community-shadow); }
.community-chat-connection { margin-bottom: 10px; color: var(--community-success); font-size: .85rem; }
.community-chat-stream { display: grid; gap: 12px; max-height: 600px; overflow-y: auto; padding: 12px; }
.community-chat-message { max-width: 82%; padding: 12px 16px; border: 1px solid rgba(255,156,220,.35); border-radius: 18px 18px 18px 4px; background: rgba(14,23,71,.92); }
.community-chat-message strong { color: var(--community-primary-2); }
.community-chat-message p { margin: 5px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.community-chat-message time { color: var(--community-muted); font-size: .78rem; }
.community-chat-compose { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 16px; }
.community-chat-compose label { grid-column: 1 / -1; color: var(--community-gold); }
.community-chat-compose textarea { min-height: 76px; padding: 12px; border: 1px solid var(--community-primary-2); border-radius: var(--community-radius-sm); color: #fff; background: rgba(8,14,50,.95); }
.community-restriction { padding: 16px; border: 1px solid var(--community-danger); border-radius: var(--community-radius-sm); background: rgba(255,107,154,.12); }

.community-tab-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; }
.community-tab-row a { padding: 8px 16px; border: 1px solid var(--community-line); border-radius: 999px; color: #fff; background: var(--community-surface); text-decoration: none; white-space: nowrap; }
.community-tab-row a.is-active { color: #23244c; background: var(--community-gold); }
.community-topic-cards { display: grid; gap: 13px; }
.community-topic-cards article { padding: 20px; border: 1px solid var(--community-line); border-radius: var(--community-radius-md); background: var(--community-surface-strong); }
.community-topic-cards h2 a { color: #fff; text-decoration: none; }
.community-topic-cards p, .community-topic-cards footer { color: var(--community-muted); }
.community-topic-cards footer { display: flex; flex-wrap: wrap; gap: 16px; }
.community-prose { line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.community-reply { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.community-reply strong { color: var(--community-primary-2); }
.community-reply p { white-space: pre-wrap; }
.community-reply time { color: var(--community-muted); font-size: .8rem; }

.community-two-column { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.community-relation-list { display: grid; gap: 10px; }
.community-relation-list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
.community-relation-list article > div:first-child { display: grid; }
.community-relation-list span { color: var(--community-muted); }
.community-member-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.community-member-grid article { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 18px; border: 1px solid var(--community-line); border-radius: var(--community-radius-md); text-align: center; background: var(--community-surface-strong); }
.community-member-grid img { width: 116px; height: 116px; border-radius: 50%; object-fit: contain; background: rgba(255,255,255,.08); }
.community-member-grid h2, .community-member-grid h3, .community-member-grid p { margin: 0; }
.community-member-grid a { color: #fff; }
.community-profile-card { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.community-profile-card > img { width: 100%; max-height: 430px; object-fit: contain; }
.community-stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.community-stat-row span { padding: 8px 14px; border-radius: 999px; color: #22264e; background: var(--community-gold); font-weight: 800; }

.community-task-layout { display: grid; grid-template-columns: minmax(240px, .45fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.community-task-art { position: sticky; top: 105px; width: 100%; max-height: 560px; object-fit: contain; }
.community-task-list { display: grid; gap: 14px; }
.community-task-list > article { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,.13); }
.community-task-main progress { width: min(460px,100%); accent-color: var(--community-accent); }
.community-task-rewards { display: flex; max-width: 240px; flex-wrap: wrap; align-content: center; justify-content: flex-end; gap: 7px; }
.community-task-rewards > span { display: inline-flex; align-items: center; gap: 3px; color: var(--community-gold); }
.community-task-rewards img { width: 28px; height: 28px; object-fit: contain; }

.community-workshop-form { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr); gap: 22px; align-items: start; }
.community-workshop-stage { position: sticky; top: 100px; display: grid; justify-items: center; gap: 8px; padding: 22px; border: 1px solid var(--community-line); border-radius: var(--community-radius-md); background: var(--community-surface-strong); box-shadow: var(--community-shadow); }
.community-character-canvas { position: relative; width: min(100%, 620px); aspect-ratio: 1; overflow: hidden; border-radius: var(--community-radius-md); background: rgba(255,255,255,.05); }
.community-character-canvas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.community-workshop-stage p { margin: 0; color: var(--community-muted); text-align: center; }
.community-workshop-options { min-width: 0; }
.community-workshop-group { margin: 0 0 20px; padding: 0; border: 0; }
.community-workshop-group legend { margin-bottom: 8px; color: var(--community-gold); font-weight: 900; }
.community-workshop-assets { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 10px; }
.community-workshop-assets label { position: relative; display: grid; min-width: 105px; justify-items: center; gap: 5px; color: var(--community-muted); font-size: .82rem; cursor: pointer; }
.community-workshop-assets input { position: absolute; opacity: 0; }
.community-workshop-assets img { width: 98px; height: 98px; border: 2px solid transparent; border-radius: var(--community-radius-sm); object-fit: contain; background: rgba(255,255,255,.06); }
.community-workshop-assets input:checked + img { border-color: var(--community-gold); box-shadow: 0 0 18px rgba(255,226,138,.45); }
.community-color-row { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0; }
.community-color-row label { display: flex; align-items: center; gap: 8px; color: var(--community-muted); }
.community-color-row input { width: 55px; height: 38px; padding: 2px; }
.community-avatar-choice { grid-template-columns: auto 1fr !important; align-items: center; }
.community-avatar-choice input { position: absolute; opacity: 0; }
.community-avatar-choice img { width: 110px; height: 110px; border: 3px solid var(--community-gold); border-radius: 50%; object-fit: contain; background: rgba(255,255,255,.08); }

.community-notification-list { display: grid; gap: 0; }
.community-notification-list article { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.community-notification-list article.is-unread { padding-inline: 14px; border-left: 4px solid var(--community-accent); background: rgba(255,156,220,.08); }
.community-notification-list p { margin: 5px 0; color: var(--community-muted); }
.community-notification-list time { color: var(--community-muted); font-size: .8rem; }

.community-auth-shell { min-height: calc(100vh - 80px); padding: 34px 16px 64px; }
.community-auth-card { display: grid; width: min(920px,100%); grid-template-columns: minmax(220px,.65fr) minmax(0,1fr); align-items: center; gap: 26px; margin: 0 auto; padding: clamp(24px,5vw,54px); border: 1px solid var(--community-line); border-radius: var(--community-radius-lg); background: var(--community-surface-strong); box-shadow: var(--community-shadow); }
.community-auth-mascot { width: 100%; max-height: 520px; object-fit: contain; }
.community-auth-card h1 { color: var(--community-gold); }

.community-footer { position: relative; min-height: 220px; padding: 58px max(100px, calc((100% - var(--community-container))/2 + 24px)) 28px; border-top: 1px solid var(--community-line); color: var(--community-muted); background: #0c1238 url('/assets/community-v3/shared/footer-desktop.webp') center / cover no-repeat; }
.community-footer nav { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.community-footer nav a { color: #fff; text-decoration: none; }
.community-back-top { position: fixed; right: 18px; bottom: 18px; z-index: 20; display: block; width: 64px; height: 64px; }
.community-back-top img { width: 100%; height: 100%; }

@media (max-width: 1180px) {
    .community-header { grid-template-columns: 200px 1fr auto; }
    .community-menu-toggle { display: block; justify-self: end; padding: 8px 12px; border: 1px solid var(--community-primary-2); border-radius: 10px; color: #fff; background: rgba(50,61,132,.95); font-size: 1.25rem; }
    .community-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; grid-template-columns: repeat(4, minmax(0,1fr)); padding: 14px; background: rgba(7,12,47,.98); }
    .community-nav.is-open { display: grid; }
    .community-nav a { justify-content: center; }
    .community-hero-v3 { min-height: 900px; }
    .community-hero-v3__mascot { width: 32%; height: 62%; bottom: 2%; }
    .community-hero-v3__welcome { left: 25%; width: 20%; }
    .community-hero-v3__center { left: 35%; width: 61%; }
    .community-hero-v3__side { top: auto; bottom: 4%; right: 3%; grid-template-columns: 1fr 1fr; width: 63%; }
    .community-admin-shortcut { grid-column: 1 / -1; }
    .community-module-grid-v3, .community-room-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) {
    body.community-body { background-image: url('/assets/community-v3/backgrounds/site-mobile.webp'); background-attachment: scroll; }
    .community-header { position: relative; grid-template-columns: minmax(150px,1fr) auto; }
    .community-logo img { height: 52px; }
    .community-account { grid-column: 1 / -1; justify-content: center; }
    .community-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .community-home-shell, .community-page-shell { width: min(100% - 20px, var(--community-container)); }
    .community-hero-v3 { display: grid; min-height: 0; gap: 12px; padding: 18px 14px 22px; }
    .community-hero-v3__background, .community-hero-v3__background img { position: absolute; }
    .community-hero-v3__center, .community-hero-v3__welcome, .community-hero-v3__mascot, .community-hero-v3__side { position: relative; inset: auto; width: 100%; }
    .community-hero-v3__center { z-index: 5; display: contents; }
    .community-hero-v3__title { order: 1; height: auto; max-height: 250px; }
    .community-hero-v3__welcome { order: 2; width: min(300px,80%); justify-self: center; }
    .community-hero-v3__mascot { order: 3; justify-self: center; width: min(260px,68%); height: 290px; object-position: center; }
    .community-hero-actions-v3 { order: 4; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; }
    .community-hero-actions-v3 a { min-height: 100px; grid-template-columns: 48px 1fr; padding: 10px; }
    .community-hero-actions-v3 img { width: 48px; height: 48px; }
    .community-hero-v3__side { order: 5; z-index: 5; grid-template-columns: 1fr; }
    .community-profile-frame, .community-progress-frame { width: 100%; }
    .community-module-grid-v3, .community-room-grid, .community-two-column, .community-room-detail, .community-profile-card, .community-task-layout, .community-workshop-form, .community-auth-card { grid-template-columns: 1fr; }
    .community-module-v3 { min-height: 360px; }
    .community-filter-bar { grid-template-columns: 1fr; }
    .community-page-header-v3 { min-height: 210px; align-items: flex-start; flex-direction: column; padding: 24px; background-image: url('/assets/community-v3/shared/page-header-mobile.webp'); }
    .community-page-header-v3 > img { width: 64px; height: 64px; }
    .community-page-header-v3 > .community-button { align-self: stretch; }
    .community-member-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .community-task-art { position: static; max-height: 300px; }
    .community-task-list > article { grid-template-columns: 1fr; }
    .community-task-rewards { max-width: none; justify-content: flex-start; }
    .community-workshop-stage { position: static; }
    .community-chat-compose { grid-template-columns: 1fr; }
    .community-chat-compose label { grid-column: auto; }
    .community-notification-list article, .community-relation-list article { align-items: stretch; flex-direction: column; }
    .community-footer { min-height: 260px; padding: 50px 82px 24px 22px; background-image: url('/assets/community-v3/shared/footer-mobile.webp'); }
}

@media (max-width: 430px) {
    .community-module-grid-v3, .community-room-mini-grid, .community-member-grid { grid-template-columns: 1fr; }
    .community-hero-actions-v3 a { grid-template-columns: 44px 1fr; }
    .community-profile-frame__content { grid-template-columns: 58px 1fr; }
    .community-profile-frame__content .community-avatar { width: 58px; height: 58px; }
    .community-back-top { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}