.clan-directory,.clan-shop,.clan-profile,.clan-form,.clan-mail { display:grid; gap:13px; min-width:0 }
.clan-page-header { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px }
.clan-page-header h1 { margin:3px 0 0; font-size:clamp(27px,7vw,49px); line-height:1.08 }
.clan-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.clan-actions .btn { min-height:42px; flex:1 1 auto }
.clan-directory-note { margin:0; color:var(--muted,#e7dcc7); font-size:14px }
.clan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.clan-card { position:relative; isolation:isolate; display:flex; align-items:center; gap:13px; min-width:0;
  text-align:left; padding:16px; width:100%; min-height:104px; border:1px solid var(--line,#ffffff35); border-radius:19px;
  overflow:hidden; color:#fff8ea; background-color:#273c30 }
button.clan-card { cursor:pointer; transition:filter .17s ease,transform .17s ease }
button.clan-card:hover { filter:brightness(1.1) }
button.clan-card:active { transform:scale(.985) }
.clan-card.banner-creek { background-color:#28515a }
.clan-card.banner-dusk { background-color:#493651 }
.clan-card.banner-rosarium { background-color:#5a253b }
.clan-card[style*="--profile-accent"] { background:var(--profile-accent); background-image:var(--profile-gradient,none); border-color:color-mix(in srgb,var(--profile-accent) 60%,#d9e8cc) }
.clan-card .uploaded-banner { z-index:-2 }
.clan-card[style*="--profile-gradient"] .uploaded-banner { opacity:.68 }
.clan-card::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#121a1ac9,#10161934 65%,transparent) }
.clan-card-text { display:grid; gap:5px; min-width:0 }
.clan-card-text strong { font-size:clamp(17px,4vw,25px); overflow-wrap:anywhere; line-height:1.07; text-shadow:0 2px 4px #000 }
.clan-card-text small { font-size:clamp(12px,2.8vw,14px); text-shadow:0 1px 3px #000 }
.clan-card-compact { min-height:83px; padding:9px 13px }
.clan-card-compact .clan-card-text strong { font-size:17px }
.clan-pagination,.clan-search-status { display:flex; justify-content:space-between; align-items:center; gap:9px }
.clan-search-status > span { overflow-wrap:anywhere; min-width:0 }
.clan-empty,.clan-state { color:var(--muted,#ddd4c0); text-align:center; margin:7px 0 }
.clan-form label { display:grid; gap:6px; min-width:0; font-weight:650 }
.clan-form input:not([type=color]),.clan-form select,.clan-form textarea { width:100%; min-width:0; min-height:44px; padding:10px 11px; border-radius:11px;
  background:var(--panel,#202824); color:inherit; border:1px solid var(--line,#ffffff40); font:inherit; font-size:16px }
.clan-form textarea { resize:vertical }
.clan-frame-color[hidden] { display:none }
.clan-form input[type=color] { min-width:52px; height:40px }
.clan-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px }
.clan-facts > span { display:grid; gap:4px; text-align:center; overflow-wrap:anywhere; padding:8px 4px;
  background:var(--panel,#252d25); border:1px solid var(--line,#ffffff33); border-radius:12px; font-size:12px }
.clan-roster { border:1px solid var(--line,#ffffff40); border-radius:14px; padding:10px }
.clan-roster > summary { cursor:pointer; padding:4px 0; font-weight:700 }
.clan-roster > summary b { float:right }
.clan-roster > div { margin-top:8px }
.clan-roster article > .btn { font-size:11px; padding:6px; min-height:34px }
.clan-mail-request { display:grid; gap:8px; padding:9px; border:1px solid var(--line,#ffffff35); border-radius:13px }
.clan-mail-request p { margin:0; padding:8px; overflow-wrap:anywhere; white-space:pre-wrap; background:#14181455; border-radius:8px }
.clan-style-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px }
.clan-style-tabs .btn { padding:5px; min-height:41px; font-size:clamp(11px,2.9vw,14px) }
.clan-style-tabs [aria-pressed=true],.clan-style-option[aria-pressed=true] { outline:1px solid #e5c181; border-color:#e5c181 }
.clan-style-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.clan-style-option { display:grid; align-content:start; align-items:center; justify-items:center; gap:6px; padding:8px 5px;
  border:1px solid var(--line,#ffffff35); border-radius:13px; background:var(--panel,#202824); color:inherit; min-width:0; text-align:center }
button.clan-style-option { cursor:pointer }
.clan-style-option > strong { font-size:13px; overflow-wrap:anywhere }
.clan-style-option > .btn { width:100%; min-height:34px; padding:5px 2px; font-size:clamp(11px,2.9vw,13px) }
.clan-style-frame,.clan-style-icon,.clan-color-dot { width:39px; height:39px; display:grid; place-items:center; padding:0; font-size:23px; line-height:1; border-radius:12px }
.clan-color-dot { border:2px solid #ffffff66; background:var(--clan-swatch) }
.clan-style-banner { display:block; position:relative; width:100%; height:48px; border-radius:8px; overflow:hidden; isolation:isolate }
.clan-style-banner .hero-art { z-index:0 }
.profile-card .hero-art.profile-landscape,.clan-card .profile-landscape,.clan-style-banner .profile-landscape,
.cosmetic-banner-preview .hero-art.profile-landscape { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;
  opacity:.78; transform:none; animation:none; mask-image:linear-gradient(90deg,transparent 3%,#000 62%) }
.profile-card .rosarium-art,.clan-card .rosarium-art,.clan-style-banner .rosarium-art,.cosmetic-banner-preview .rosarium-art {
  position:absolute; inset:0; width:100%; height:100%; max-width:none; transform:none; animation:none; opacity:.92;
  mask-image:linear-gradient(90deg,transparent 15%,#000 36%) }
.rosarium-art > span { font-size:clamp(22px,8cqi,65px) }
.clan-card .hero-art { z-index:-2 }
.clan-style-banner .profile-landscape,.clan-style-banner .rosarium-art,.cosmetic-banner-preview .profile-landscape,
.cosmetic-banner-preview .rosarium-art { mask-image:none }
@media(max-width:560px) {
  .clan-grid { grid-template-columns:1fr; gap:8px }
  .clan-card { padding:11px 13px; min-height:79px }
  .clan-card-compact { min-height:73px }
  .clan-page-header > .clan-actions { flex:1 1 100% }
}

.clan-own { display:grid; gap:14px; min-width:0 }
.clan-own > .clan-card { min-height:clamp(114px,19vw,176px) }
.clan-own > [data-clan-action=roster] { min-height:46px }
.clan-avatar-icon { display:grid; place-items:center; width:clamp(46px,6vw,68px); aspect-ratio:1; border-radius:17px;
  font-size:clamp(24px,4vw,35px); line-height:1 }
@media (prefers-reduced-motion:no-preference) {
  .rosarium-art > span { animation:rose-wave 5.6s ease-in-out var(--sway,0s) infinite alternate }
}
@keyframes rose-wave {
  from { transform:translate(-50%,calc(-50% - 3px)) rotate(calc(var(--angle) - 5deg)) scale(var(--scale)) }
  to { transform:translate(-50%,calc(-50% + 5px)) rotate(calc(var(--angle) + 5deg)) scale(var(--scale)) }
}

.clan-treasury > span { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:5px }
.clan-treasury .wallet-add { width:24px; height:24px; flex:0 0 24px }
.clan-treasury .wallet-add .ui-icon { width:12px; height:12px }
.clan-deposit-total { margin:0; text-align:center }
.clan-permissions { display:grid; gap:9px }
.clan-permissions details { border:1px solid var(--line); border-radius:13px; padding:8px 10px }
.clan-permissions summary { padding:4px 0; font-weight:700; cursor:pointer }
.clan-form label.clan-permission { display:flex; justify-content:space-between; align-items:center; min-height:38px; gap:8px;
  border-top:1px solid var(--line); font-size:13px }
.clan-form .clan-permission input[role=switch] { appearance:none; flex:0 0 38px; width:38px; height:22px; min-height:0;
  padding:0; margin:0; border:1px solid var(--line); border-radius:999px; background:#171d19; cursor:pointer }
.clan-permission input[role=switch]::before { content:""; display:block; width:16px; height:16px; margin:2px;
  border-radius:50%; background:#d4cdbb; transition:transform .14s }
.clan-form .clan-permission input[role=switch]:checked { background:#57744a }
.clan-permission input[role=switch]:checked::before { transform:translateX(16px) }