/* Clans module — kerkman */

/* ── Wrapper & header ──────────────────────────────────── */
.clans-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.clans-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.clans-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--br-10);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-default);
    font-size: 14px;
    font-weight: var(--font-weight-6);
    text-decoration: none;
    transition: var(--transition-duration);
}

.clans-back-link svg {
    fill: currentColor;
}

.clans-back-link:hover {
    background: rgba(255, 255, 255, 0.07);
}

.clans-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--br-10);
    background: var(--red);
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: var(--font-weight-6);
    cursor: pointer;
    transition: var(--transition-duration);
}

.clans-create-btn svg {
    fill: currentColor;
}

.clans-create-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* ── Clan cards grid ───────────────────────────────────── */
.clans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.clans-grid--3 { grid-template-columns: repeat(3, 1fr); }
.clans-grid--4 { grid-template-columns: repeat(4, 1fr); }
.clans-grid--5 { grid-template-columns: repeat(5, 1fr); }

/* ── Individual card ───────────────────────────────────── */
.clan-card {
    position: relative;
    display: block;
    border-radius: var(--br-16);
    overflow: hidden;
    height: 220px;
    text-decoration: none;
    color: inherit;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}

.clan-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* gradient overlay */
.clan-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(17, 17, 17, 0.08) 0%,
        rgba(17, 17, 17, 0.42) 45%,
        rgba(17, 17, 17, 0.94) 100%
    );
    z-index: 1;
}

.clan-card-num {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.7);
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--br-6);
    padding: 2px 8px;
    backdrop-filter: blur(4px);
}

.clan-card-avatar {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 52px;
    height: 52px;
    border-radius: var(--br-10);
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.18);
    z-index: 2;
}

.clan-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 14px 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clan-card-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.clan-card-name {
    font-size: 16px;
    font-weight: var(--font-weight-7);
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.clan-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.12);
    flex-shrink: 0;
    line-height: 1.5;
}

.clan-card-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.clan-card-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: var(--font-weight-5);
}

.clan-card-stat svg {
    flex-shrink: 0;
}

.clan-card-stat.members {
    color: rgba(255, 255, 255, 0.85);
    fill: rgba(255, 255, 255, 0.85);
}

.clan-card-stat.bank {
    color: var(--money);
    fill: var(--money);
}

.clan-card-stat.bank svg {
    fill: var(--money);
}

.clan-card-stat.rating {
    color: var(--top-one);
    fill: var(--top-one);
}

.clan-card-stat.rating svg {
    fill: var(--top-one);
}

.clan-card-stat.members svg {
    fill: rgba(255, 255, 255, 0.7);
}

.clan-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clan-card-level {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3px 9px;
    border-radius: var(--br-6);
}

.clan-card-join-type {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.48);
}

/* ── Loading / empty states ────────────────────────────── */
.clans-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    grid-column: 1 / -1;
}

.clans-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--span);
    border-radius: 50%;
    animation: clans-spin 0.7s linear infinite;
}

@keyframes clans-spin {
    to { transform: rotate(360deg); }
}

.clans-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 15px;
}

/* ── Detail page layout ────────────────────────────────── */
.clan-detail {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
}

/* ── Sidebar card ──────────────────────────────────────── */
.clan-detail-sidebar {
    position: sticky;
    top: 80px;
}

.clan-sidebar-card {
    background: var(--card);
    border-radius: var(--br-16);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.clan-sidebar-banner {
    position: relative;
    height: 150px;
    background-size: cover;
    background-position: center;
    background-color: var(--button);
}

.clan-sidebar-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(23, 23, 23, 0.88) 100%);
}

.clan-sidebar-avatar {
    position: absolute;
    bottom: -28px;
    left: 16px;
    width: 68px;
    height: 68px;
    border-radius: var(--br-12);
    object-fit: cover;
    border: 3px solid var(--card);
    z-index: 2;
}

/* ── Clan rating bar ───────────────────────────────────── */
.clan-rating-bar {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 3;
}
.crat-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 5px 10px !important;
    border-radius: var(--br-8) !important;
    background: rgba(0,0,0,.55) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    color: rgba(255,255,255,.75) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all .15s !important;
    backdrop-filter: blur(6px);
    width: auto !important;
    height: auto !important;
}
.crat-btn svg { fill: currentColor; }
.crat-btn:hover { background: rgba(0,0,0,.75) !important; border-color: rgba(255,255,255,.3) !important; }
.crat-btn:disabled { cursor: not-allowed !important; opacity: .5 !important; }
.crat-active-like    { background: rgba(74,222,128,.25) !important; border-color: rgba(74,222,128,.5) !important; color: #4ade80 !important; }
.crat-active-dislike { background: rgba(255,73,64,.25)  !important; border-color: rgba(255,73,64,.5)  !important; color: var(--red) !important; }
.crat-views {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--br-8);
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.65);
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(6px);
}
.crat-views svg { fill: currentColor; }

.clan-sidebar-body {
    padding: 46px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.clan-sidebar-name-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.clan-sidebar-name {
    font-size: 19px;
    font-weight: var(--font-weight-7);
    color: var(--text-default);
    margin: 0;
    line-height: 1.2;
}

.clan-sidebar-join-type {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--br-6);
}

.clan-sidebar-join-type.open {
    background: rgba(100, 206, 130, 0.1);
    border: 1px solid rgba(100, 206, 130, 0.25);
    color: var(--green);
}

.clan-sidebar-join-type.closed {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
}

.clan-sidebar-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

/* Stats 2×2 grid */
.clan-sidebar-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.clan-sidebar-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border-radius: var(--br-10);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.clan-sidebar-stat-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.clan-sidebar-stat-value {
    font-size: 15px;
    font-weight: var(--font-weight-7);
    color: var(--text-default);
}

.clan-sidebar-stat-value.money {
    color: var(--money);
}

.clan-sidebar-stat-value.rating {
    color: var(--top-one);
}

/* XP bar */
.clan-sidebar-level {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.clan-sidebar-level-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clan-sidebar-level-name {
    font-size: 13px;
    font-weight: var(--font-weight-6);
    color: var(--text-default);
}

.clan-sidebar-level-xp {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.clan-sidebar-xp-bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    overflow: hidden;
}

.clan-sidebar-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--span), var(--money));
    border-radius: 99px;
    transition: width 0.7s ease;
}

/* Dates */
.clan-sidebar-dates {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clan-sidebar-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.clan-sidebar-date span:first-child {
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    gap: 6px;
}

.clan-sidebar-date span:first-child svg {
    fill: rgba(255, 255, 255, 0.4);
}

.clan-sidebar-date span:last-child {
    color: var(--text-default);
    font-weight: var(--font-weight-5);
}

/* Action buttons (join/leave/closed) */
.clan-info-action {
    display: block;
    width: 100%;
    padding: 11px;
    border-radius: var(--br-10);
    border: none;
    font-size: 14px;
    font-weight: var(--font-weight-6);
    cursor: pointer;
    transition: var(--transition-duration);
    text-align: center;
    font-family: inherit;
}

.clan-info-action.clan-join {
    background: var(--red);
    color: #fff;
}

.clan-info-action.clan-join:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.clan-info-action.clan-leave {
    background: rgba(255, 73, 64, 0.08);
    border: 1px solid rgba(255, 73, 64, 0.25);
    color: var(--red);
}

.clan-info-action.clan-leave:hover {
    background: rgba(255, 73, 64, 0.14);
}

.clan-info-action.clan-closed {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.35);
    cursor: not-allowed;
}

/* ── Right content area ────────────────────────────────── */
.clan-detail-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* ── Tabs ──────────────────────────────────────────────── */
.clan-tabs-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.clan-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--br-10);
    font-size: 14px;
    font-weight: var(--font-weight-6);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: var(--transition-duration);
    font-family: inherit;
    appearance: none;
}

.clan-tab svg {
    fill: currentColor;
    flex-shrink: 0;
}

.clan-tab:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.8);
}

.clan-tab.active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* Tab content panels */
.clan-tab-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.clan-tab-content.hidden,
.clan-members-card.hidden {
    display: none;
}

/* ── Info description card ─────────────────────────────── */
.clan-info-card {
    background: var(--card);
    border-radius: var(--br-16);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.clan-info-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: var(--font-weight-7);
    color: var(--text-default);
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.clan-info-card-title svg {
    fill: var(--red);
}

.clan-info-description {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.78);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Members card ──────────────────────────────────────── */
.clan-members-card {
    background: var(--card);
    border-radius: var(--br-16);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clan-member {
    display: grid;
    grid-template-columns: 46px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--br-10);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: var(--transition-duration);
}

.clan-member:hover {
    background: rgba(255, 255, 255, 0.05);
}

.clan-member-avatar img {
    width: 46px;
    height: 46px;
    border-radius: var(--br-8);
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.08);
    display: block;
}

.clan-member-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.clan-member-name {
    font-size: 14px;
    font-weight: var(--font-weight-6);
    color: var(--text-default);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clan-member-name:hover {
    color: var(--span);
}

.clan-member-role {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
    border: 1px solid transparent;
    width: fit-content;
    line-height: 1.6;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.clan-member-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    text-align: right;
}

.clan-member-actions {
    display: flex;
    gap: 6px;
}

.clan-member-kick {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--br-8);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-duration);
    color: rgba(255, 255, 255, 0.4);
}

.clan-member-kick svg {
    fill: currentColor;
}

.clan-member-kick:hover {
    background: rgba(255, 73, 64, 0.1);
    border-color: rgba(255, 73, 64, 0.28);
    color: var(--red);
}

/* ── Settings page ─────────────────────────────────────── */
.clan-settings-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.clan-settings-section-card {
    background: var(--card);
    border-radius: var(--br-16);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.clan-settings-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: var(--font-weight-6);
    color: var(--text-default);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.clan-settings-section-title svg {
    fill: var(--span);
}

.clan-settings-field {
    margin-bottom: 14px;
}

.clan-settings-field:last-child {
    margin-bottom: 0;
}

.clan-settings-label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.clan-settings-inline {
    display: flex;
    gap: 10px;
}

.clan-settings-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: var(--br-10);
    background: var(--input-form);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-default);
    font-size: 14px;
    outline: none;
    transition: var(--transition-duration);
    font-family: inherit;
}

.clan-settings-input:focus {
    border-color: rgba(255, 255, 255, 0.2);
}

.clan-settings-save-btn {
    padding: 10px 20px;
    border-radius: var(--br-10);
    background: var(--span);
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: var(--font-weight-6);
    cursor: pointer;
    transition: var(--transition-duration);
    white-space: nowrap;
    font-family: inherit;
}

.clan-settings-save-btn:hover {
    filter: brightness(1.12);
}

.clan-settings-img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.clan-settings-img-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 14px;
    border-radius: var(--br-10);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.clan-settings-img-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

.clan-settings-img-btn {
    padding: 6px 14px;
    border-radius: var(--br-8);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition-duration);
    font-family: inherit;
}

.clan-settings-img-btn:hover {
    background: rgba(255, 255, 255, 0.09);
}

.clan-settings-img-actions {
    display: flex;
    gap: 10px;
}

.clan-settings-img-save {
    padding: 9px 22px;
    border-radius: var(--br-10);
    background: var(--span);
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: var(--font-weight-6);
    cursor: pointer;
    transition: var(--transition-duration);
    font-family: inherit;
}

.clan-settings-img-save:hover {
    filter: brightness(1.12);
}

.clan-settings-img-clear {
    padding: 9px 22px;
    border-radius: var(--br-10);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition-duration);
    font-family: inherit;
}

.clan-settings-img-clear:hover {
    background: rgba(255, 255, 255, 0.08);
}

.clan-settings-privacy-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clan-settings-privacy-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

.clan-settings-toggle-btn {
    padding: 8px 18px;
    border-radius: var(--br-10);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition-duration);
    font-family: inherit;
}

.clan-settings-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ── Create clan modal ─────────────────────────────────── */
.clans-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.clans-modal-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.clans-modal {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-radius: var(--br-16);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
    transform: translateY(18px) scale(0.97);
    transition: transform 0.2s ease;
}

.clans-modal-overlay.open .clans-modal {
    transform: translateY(0) scale(1);
}

.clans-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.clans-modal-title {
    font-size: 17px;
    font-weight: var(--font-weight-7);
    color: var(--text-default);
    margin: 0;
}

.clans-modal-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--br-8);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-duration);
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

.clans-modal-close::before,
.clans-modal-close::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 1.8px;
    background: currentColor;
    border-radius: 2px;
}

.clans-modal-close::before { transform: rotate(45deg); }
.clans-modal-close::after  { transform: rotate(-45deg); }

.clans-modal-close:hover {
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-default);
}

.clans-modal-field {
    margin-bottom: 12px;
}

.clans-modal-label {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 7px;
    font-weight: var(--font-weight-4);
}

/* Input + counter wrapper */
.clans-modal-input-wrap {
    position: relative;
}

.clans-modal-input {
    display: block;
    width: 100%;
    padding: 11px 52px 11px 14px;
    border-radius: var(--br-10);
    background: var(--input-form);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-default);
    font-size: 14px;
    outline: none;
    transition: var(--transition-duration);
    box-sizing: border-box;
    font-family: inherit;
}

.clans-modal-input:focus {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
}

.clans-modal-counter {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.28);
    pointer-events: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Two-button row */
.clans-modal-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 18px;
}

.clans-modal-cancel {
    flex: 1;
    min-width: 0;
    padding: 12px 10px;
    border-radius: var(--br-10);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    font-weight: var(--font-weight-5);
    cursor: pointer;
    transition: var(--transition-duration);
    font-family: inherit;
    text-align: center;
}

.clans-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-default);
}

.clans-modal-submit {
    flex: 1;
    min-width: 0;
    padding: 12px 10px;
    border-radius: var(--br-10);
    background: var(--green);
    border: none;
    color: #111;
    font-size: 14px;
    font-weight: var(--font-weight-7);
    cursor: pointer;
    transition: var(--transition-duration);
    font-family: inherit;
    text-align: center;
}

.clans-modal-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.clans-modal-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* ── Server selector (in tabs bar) ────────────────────── */
.cmt-srv-wrap {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}
.cmt-srv-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: var(--br-8);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: var(--text-default);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition-duration);
    white-space: nowrap;
    width: auto !important;
    height: auto !important;
}
.cmt-srv-btn svg { fill: currentColor; flex-shrink: 0; }
.cmt-srv-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.cmt-srv-arrow { transition: transform .15s; }
.cmt-srv-wrap.open .cmt-srv-arrow { transform: rotate(180deg); }
.cmt-srv-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 200px;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--br-10);
    padding: 4px;
    z-index: 400;
    box-shadow: 0 10px 36px rgba(0,0,0,.55);
    animation: crDropIn .12s ease;
}
.cmt-srv-wrap.open .cmt-srv-dropdown { display: block; }
.cmt-sopt {
    display: flex !important;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--br-6);
    border: none;
    background: transparent;
    color: rgba(255,255,255,.65);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s;
    white-space: nowrap;
    height: auto !important;
}
.cmt-sopt:hover { background: rgba(255,255,255,.07); color: #fff; }
.cmt-sopt--active { color: var(--span) !important; background: rgba(126,157,255,.1) !important; }

/* ── Members table ─────────────────────────────────────── */
.cmt-table-wrap {
    overflow-x: auto;
}
.cmt-table {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 780px;
}
.cmt-head,
.cmt-row {
    display: grid;
    grid-template-columns: 36px 1fr 90px 65px 65px 55px 72px 62px 82px 95px 36px;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--br-8);
}
.cmt-head {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
}
.cmt-head .cmt-cell {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255,255,255,.35);
}
.cmt-row {
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.05);
    transition: background var(--transition-duration);
}
.cmt-row:hover { background: rgba(255,255,255,.05); }
.cmt-cell { min-width: 0; }
.cmt-cell--pos {
    display: flex;
    align-items: center;
    justify-content: center;
}
.cmt-num {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.35);
}
.cmt-cell--player {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.cmt-avatar-link { flex-shrink: 0; }
.cmt-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--br-6);
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.08);
    display: block;
}
.cmt-player-info { min-width: 0; }
.cmt-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-default);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cmt-name:hover { color: var(--span); }
.cmt-cell--role { display: flex; align-items: center; }
.cmt-cell--kd,
.cmt-cell--kills,
.cmt-cell--deaths,
.cmt-cell--xp,
.cmt-cell--coins,
.cmt-cell--joined,
.cmt-cell--activity {
    font-size: 13px;
    color: rgba(255,255,255,.7);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cmt-cell--kd { font-weight: 600; color: var(--text-default); }
.cmt-contrib {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cmt-contrib--xp   { color: #f59e0b; }
.cmt-contrib--coins { color: #34d399; }
.cmt-cell--actions {
    display: flex;
    align-items: center;
    justify-content: center;
}
.cmt-kick {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--br-6);
    border: 1px solid rgba(255,255,255,.08);
    background: transparent;
    color: rgba(255,255,255,.35);
    cursor: pointer;
    transition: var(--transition-duration);
    padding: 0;
}
.cmt-kick svg { fill: currentColor; }
.cmt-kick:hover { background: rgba(255,73,64,.1); border-color: rgba(255,73,64,.3); color: var(--red); }

/* ════════════════════════════════════════════════════════
   ADMIN PAGE
   ════════════════════════════════════════════════════════ */

.ca-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--card);
    border-radius: var(--br-16);
    border: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

/* ── Top bar ───────────────────────────────────────────── */
.ca-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.02);
    flex-wrap: wrap;
    gap: 8px;
}
.ca-tabs-nav {
    display: flex;
    gap: 0;
}
.ca-tab {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 12px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.4) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: color .15s !important;
    white-space: nowrap !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    box-shadow: none !important;
}
.ca-tab svg { fill: currentColor; flex-shrink: 0; }
.ca-tab::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    width: auto !important;
    border-radius: 2px 2px 0 0 !important;
    background: var(--span, #7e9dff) !important;
    opacity: 0 !important;
    transition: opacity .15s !important;
    transform: none !important;
}
.ca-tab:hover { color: rgba(255,255,255,.75) !important; background: transparent !important; }
.ca-tab.active { color: var(--span, #7e9dff) !important; background: transparent !important; }
.ca-tab.active::after { opacity: 1 !important; }

.ca-topbar-actions {
    display: flex;
    gap: 8px;
    padding-bottom: 6px;
}
.ca-btn-reset {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 16px !important;
    border-radius: var(--br-8) !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: rgba(255,255,255,.6) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: var(--transition-duration) !important;
    width: auto !important;
    height: auto !important;
}
.ca-btn-reset svg { fill: currentColor; }
.ca-btn-reset:hover { background: rgba(255,255,255,.09) !important; }
.ca-btn-save {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 16px !important;
    border-radius: var(--br-8) !important;
    background: var(--green, #4ade80) !important;
    border: none !important;
    color: #111 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: var(--transition-duration) !important;
    width: auto !important;
    height: auto !important;
}
.ca-btn-save svg { fill: currentColor; }
.ca-btn-save:hover { filter: brightness(1.08) !important; }

/* ── Panel ─────────────────────────────────────────────── */
.ca-panel { padding: 20px; }
.ca-panel.hidden { display: none; }

/* ── Two-column layout ─────────────────────────────────── */
.ca-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.ca-col { display: flex; flex-direction: column; gap: 16px; }

.ca-two-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ca-four-inputs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* ── Toggle row ────────────────────────────────────────── */
.ca-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ca-toggles-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.06);
}

/* ── Radio group ───────────────────────────────────────── */
.ca-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.ca-radio-opt {
    display: inline-flex !important;
    align-items: center;
    padding: 7px 14px !important;
    border-radius: var(--br-8) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    background: rgba(255,255,255,.04) !important;
    color: rgba(255,255,255,.55) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all .15s !important;
    white-space: nowrap !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
}
.ca-radio-opt:hover { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.8) !important; transform: none !important; }
.ca-radio-opt.ca-active,
.ca-radio-opt[data-active="1"] {
    background: rgba(126,157,255,.18) !important;
    background-color: rgba(126,157,255,.18) !important;
    border-color: rgba(126,157,255,.5) !important;
    border-width: 1px !important;
    color: var(--span, #7e9dff) !important;
    box-shadow: inset 0 0 0 1px rgba(126,157,255,.3) !important;
    font-weight: 700 !important;
}

/* ── Section head (levels) ─────────────────────────────── */
.ca-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

/* ── Level rows ────────────────────────────────────────── */
.ca-lv-head {
    display: grid;
    grid-template-columns: 1fr 140px 220px;
    gap: 8px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255,255,255,.35);
}
.ca-level-row {
    display: grid;
    grid-template-columns: 1fr 140px 220px;
    gap: 8px;
    align-items: center;
    padding: 9px 10px;
    border-radius: var(--br-8);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
    margin-bottom: 5px;
    transition: background .12s;
}
.ca-level-row:hover { background: rgba(255,255,255,.05); }
.ca-level-name { font-size: 13px; font-weight: 600; color: var(--text-default); }
.ca-level-xp { font-size: 13px; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
.ca-level-actions { display: flex; gap: 6px; justify-content: flex-end; }
.ca-empty-note { font-size: 13px; color: rgba(255,255,255,.35); margin: 0; padding: 16px 0; text-align: center; }

/* ── Logs layout ───────────────────────────────────────── */
.ca-logs-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    align-items: start;
}
.ca-logs-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ca-logs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ca-logs-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-default);
}
.ca-log-loading {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}
.ca-log-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--br-10);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
    transition: background .12s;
}
.ca-log-entry:hover { background: rgba(255,255,255,.05); }
.ca-log-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ca-log-icon svg { width: 15px; height: 15px; fill: currentColor; }
.ca-log-icon.join     { background: rgba(74,222,128,.15);  color: #4ade80; }
.ca-log-icon.leave    { background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); }
.ca-log-icon.kick     { background: rgba(255,73,64,.15);   color: var(--red); }
.ca-log-icon.request  { background: rgba(6,182,212,.15);   color: #06b6d4; }
.ca-log-icon.request_accept  { background: rgba(74,222,128,.15); color: #4ade80; }
.ca-log-icon.request_decline { background: rgba(255,73,64,.15);  color: var(--red); }
.ca-log-icon.role_assign     { background: rgba(167,139,250,.15); color: #a78bfa; }
.ca-log-icon.create          { background: rgba(126,157,255,.15); color: var(--span); }
.ca-log-icon.name_change     { background: rgba(126,157,255,.15); color: var(--span); }
.ca-log-icon.desc_change     { background: rgba(126,157,255,.15); color: var(--span); }
.ca-log-icon.privacy_change  { background: rgba(6,182,212,.15);   color: #06b6d4; }
.ca-log-icon.cooldown_change { background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); }
.ca-log-icon.role_create     { background: rgba(167,139,250,.15); color: #a78bfa; }
.ca-log-icon.role_update     { background: rgba(167,139,250,.15); color: #a78bfa; }
.ca-log-icon.role_delete     { background: rgba(255,73,64,.15);   color: var(--red); }
.ca-log-icon.shop_extend     { background: rgba(244,202,128,.15); color: var(--money); }
.ca-log-icon.shop_bank       { background: rgba(244,202,128,.15); color: var(--money); }
.ca-log-icon.shop_slots      { background: rgba(167,139,250,.15); color: #a78bfa; }
.ca-log-icon.media_avatar    { background: rgba(126,157,255,.15); color: var(--span); }
.ca-log-icon.media_banner    { background: rgba(126,157,255,.15); color: var(--span); }
.ca-log-body { flex: 1; min-width: 0; }
.ca-log-text {
    font-size: 13px;
    color: var(--text-default);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ca-log-text a { color: var(--span); text-decoration: none; }
.ca-log-text a:hover { text-decoration: underline; }
.ca-log-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 11px;
    color: rgba(255,255,255,.35);
}
.ca-log-meta svg { fill: currentColor; }
.ca-logs-pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding-top: 4px;
}
.ca-page-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--br-6) !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.6) !important;
    font-size: 13px !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all .12s !important;
    width: auto !important;
    height: auto !important;
    padding: 6px 10px !important;
}
.ca-page-btn:hover { background: rgba(255,255,255,.09) !important; }
.ca-page-btn.active { background: var(--span, #7e9dff) !important; border-color: var(--span) !important; color: #fff !important; }

/* ── ca-input base ─────────────────────────────────────── */
.ca-input { width: 100%; box-sizing: border-box; }

@media (max-width: 900px) {
    .ca-two-col { grid-template-columns: 1fr; }
    .ca-four-inputs { grid-template-columns: 1fr 1fr; }
    .ca-logs-layout { grid-template-columns: 1fr; }
    .ca-lv-head, .ca-level-row { grid-template-columns: 1fr auto; }
    .ca-lv-head span:last-child, .ca-level-row .ca-level-xp { display: none; }
}

/* ── Tab badge (request count) ────────────────────────── */
.clan-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
}

/* ── Request rows ──────────────────────────────────────── */
.clan-request-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--br-10);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    margin-bottom: 6px;
    transition: var(--transition-duration);
}
.clan-request-row:hover { background: rgba(255,255,255,.05); }
.clan-request-row:last-child { margin-bottom: 0; }
.clan-request-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--br-8);
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.08);
    display: block;
}
.clan-request-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.clan-request-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-default);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.clan-request-name:hover { color: var(--span); }
.clan-request-date { font-size: 11px; color: rgba(255,255,255,.38); }
.clan-request-actions { display: flex; gap: 6px; }
.clan-request-btn {
    padding: 6px 14px;
    border-radius: var(--br-8);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
    transition: var(--transition-duration);
    white-space: nowrap;
}
.clan-request-accept { background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.25); color: #4ade80; }
.clan-request-accept:hover { background: rgba(74,222,128,.18); }
.clan-request-decline { background: rgba(255,73,64,.08); border-color: rgba(255,73,64,.2); color: var(--red); }
.clan-request-decline:hover { background: rgba(255,73,64,.15); }

/* ── Pagination wrap ───────────────────────────────────── */
#clans-pagination-wrap .pagination {
    justify-content: center;
    margin-top: 4px;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1200px) {
    .clans-grid--5 { grid-template-columns: repeat(4, 1fr); }
    .clans-grid--4 { grid-template-columns: repeat(3, 1fr); }
    .clans-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .clans-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .clan-detail {
        grid-template-columns: 1fr;
    }

    .clan-detail-sidebar {
        position: static;
    }

    .clan-sidebar-card {
        max-width: 360px;
        margin: 0 auto;
    }
}

@media (max-width: 560px) {
    .clans-grid {
        grid-template-columns: 1fr;
    }

    .clan-settings-img-grid {
        grid-template-columns: 1fr;
    }

    .clan-member {
        grid-template-columns: 46px 1fr auto;
    }

    .clan-member-stats {
        display: none;
    }

    .clan-settings-inline {
        flex-direction: column;
    }

    .clan-settings-save-btn {
        width: 100%;
    }
}

/* ── Settings sub-tabs ────────────────────────────────────── */
.cs-subtabs {
    display: block;
    white-space: nowrap;
    overflow-x: auto;
    padding: 4px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--br-10, 10px);
    margin-bottom: 16px;
}
.cs-subtab {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--br-8, 8px);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.45);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
    font-family: inherit;
    white-space: nowrap;
    width: auto;
    height: auto;
    vertical-align: middle;
}
.cs-subtab svg { fill: currentColor; flex-shrink: 0; }
.cs-subtab:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); }
.cs-subtab.active { background: rgba(126,157,255,.15); color: #a5b4fc; }
.cs-stab-panel { display: block; }
.cs-stab-panel.hidden { display: none; }

/* ── Roles list ───────────────────────────────────────────── */
.cr-role-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--br-8, 8px);
    border: 1px solid rgba(255,255,255,.06);
    margin-bottom: 6px;
    background: rgba(255,255,255,.02);
    transition: background .15s;
}
.cr-role-row:hover { background: rgba(255,255,255,.04); }
.cr-role-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.cr-role-name { font-size: 14px; font-weight: 600; color: var(--text-default); flex: 1; }
.cr-role-actions { display: flex; gap: 4px; margin-left: auto; }
.cr-btn-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.5);
    cursor: pointer;
    transition: all .15s;
    padding: 0;
    width: auto;
    height: auto;
    padding: 6px;
}
.cr-btn-icon svg { fill: currentColor; }
.cr-btn-icon:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
.cr-btn-danger:hover { background: rgba(239,68,68,.15); color: #ef4444; border-color: rgba(239,68,68,.3); }

/* ── Role edit modal ──────────────────────────────────────── */
.cr-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cr-modal-overlay.open { display: flex; }
.cr-modal {
    background: var(--card);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
    animation: crModalIn .18s ease;
    overflow: hidden;
}
@keyframes crModalIn {
    from { opacity:0; transform:scale(.95) translateY(10px); }
    to   { opacity:1; transform:scale(1)   translateY(0);    }
}
.cr-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.cr-modal-preview {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cr-modal-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #9ca3af;
    transition: background .15s;
}
.cr-modal-head-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,.45);
}
.cr-modal-role-preview {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-default);
    transition: color .15s;
}
.cr-modal-x {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.5);
    cursor: pointer;
    padding: 0;
    width: auto;
    height: auto;
    padding: 5px;
    transition: all .15s;
}
.cr-modal-x svg { fill: currentColor; }
.cr-modal-x:hover { background: rgba(255,255,255,.12); color: #fff; }
.cr-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.cr-modal-field { display: flex; flex-direction: column; gap: 7px; }
.cr-modal-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.4);
}
/* ── Color tile picker ──────────────────────────────────────── */
.cr-color-hint {
    font-size: 12px;
    color: rgba(255,255,255,.38);
    margin: 4px 0 10px;
    line-height: 1.5;
}
.cr-label-req { color: var(--red, #ef4444); margin-left: 2px; }
.cr-color-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cr-color-tile {
    width: 46px;
    height: 34px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: transform .12s ease, box-shadow .12s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.cr-color-tile:hover { transform: scale(1.07); }
.cr-color-tile.active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(255,255,255,.22);
}
.cr-tile-custom {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 55%, #c4b5fd 100%);
    color: rgba(255,255,255,.9);
}
.cr-tile-custom svg { fill: currentColor; pointer-events: none; }
.cr-color-input-hidden {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

/* kept for legacy (create-form color input) */
.cr-color-row { display: flex; align-items: center; gap: 10px; }
/* ── Modal tabs (underline style) ────────────────────────────── */
.cr-modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 0 20px;
    flex-shrink: 0;
}
.cr-modal-tab {
    position: relative !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.4) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: color .15s !important;
    white-space: nowrap !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
}
.cr-modal-tab::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: 2px !important;
    border-radius: 2px 2px 0 0 !important;
    background: var(--span, #7e9dff) !important;
    opacity: 0 !important;
    transition: opacity .15s !important;
    transform: none !important;
}
.cr-modal-tab:hover {
    color: rgba(255,255,255,.75) !important;
    background: transparent !important;
    transform: none !important;
}
.cr-modal-tab.active {
    color: var(--span, #7e9dff) !important;
    background: transparent !important;
    background-color: transparent !important;
}
.cr-modal-tab.active::after { opacity: 1 !important; }

/* ── Perms body modifier ──────────────────────────────────────── */
.cr-modal-body.hidden { display: none !important; }
.cr-modal-body--perms {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

/* ── Permission row with toggle ──────────────────────────────── */
.cr-perm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.cr-perm-row:last-child { border-bottom: none; }
.cr-perm-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.cr-perm-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-default);
}
.cr-perm-desc {
    font-size: 12px;
    color: rgba(255,255,255,.38);
    line-height: 1.5;
}

/* ── Toggle switch ────────────────────────────────────────────── */
.cr-toggle {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    display: inline-flex;
}
.cr-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.cr-toggle-track {
    display: block;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.08);
    position: relative;
    transition: background .2s, border-color .2s;
}
.cr-toggle input:checked + .cr-toggle-track {
    background: var(--span, #7e9dff);
    border-color: var(--span, #7e9dff);
}
.cr-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    transition: transform .2s, background .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.cr-toggle input:checked + .cr-toggle-track .cr-toggle-thumb {
    transform: translateX(20px);
    background: #fff;
}

.cr-modal-footer {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.02);
}
.cr-modal-footer > * {
    flex: 1;
    text-align: center;
    justify-content: center;
}
.cr-form-row { display: flex; gap: 10px; align-items: center; }
.cr-name-input { flex: 1; }
.cr-color-input {
    width: 40px; height: 40px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--br-8, 8px);
    background: rgba(255,255,255,.05);
    cursor: pointer; padding: 2px; flex-shrink: 0;
}
.cr-perms-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-perm-check {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: rgba(255,255,255,.65);
    cursor: pointer; user-select: none;
}
.cr-perm-check input[type="checkbox"] {
    accent-color: var(--accent, #7e9dff); width: 14px; height: 14px; cursor: pointer;
}
.cr-form-actions { display: flex; gap: 8px; margin-top: 12px; }
.cr-member-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.cr-member-row:last-child { border-bottom: none; }
.cr-member-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cr-member-name {
    font-size: 13px; color: var(--text-default); flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cr-role-select {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.75); border-radius: var(--br-8, 8px);
    padding: 5px 10px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.cr-fixed-role { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.cr-fixed-role.owner  { background:rgba(251,191,36,.12); color:#fbbf24; border:1px solid rgba(251,191,36,.25); }
.cr-fixed-role.deputy { background:rgba(167,139,250,.12); color:#a78bfa; border:1px solid rgba(167,139,250,.25); }

/* ── Role picker (Discord-style) ──────────────────────────── */
.cr-member-role-area {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.cr-role-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px 3px 10px;
    border-radius: 99px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.cr-tag-remove {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: none;
    background: transparent;
    color: inherit;
    opacity: .5;
    cursor: pointer;
    padding: 0;
    transition: opacity .15s, background .15s;
    flex-shrink: 0;
    width: auto;
    height: auto;
}
.cr-tag-remove svg { fill: currentColor; }
.cr-tag-remove:hover { opacity: 1; background: rgba(255,255,255,.12); border-radius: 3px; }
.cr-role-picker { position: relative; flex-shrink: 0; }
.cr-add-role-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px dashed rgba(255,255,255,.2);
    background: transparent;
    color: rgba(255,255,255,.4);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
    font-family: inherit;
    width: auto;
    height: auto;
}
.cr-add-role-btn svg { fill: currentColor; }
.cr-add-role-btn:hover {
    border-color: rgba(255,255,255,.45);
    color: rgba(255,255,255,.8);
    background: rgba(255,255,255,.04);
}
.cr-role-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 4px;
    z-index: 300;
    box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
    animation: crDropIn .12s ease;
}
@keyframes crDropIn {
    from { opacity:0; transform:translateY(-6px) scale(.97); }
    to   { opacity:1; transform:translateY(0)   scale(1);    }
}
.cr-role-picker.open .cr-role-dropdown { display: block; }
.cr-role-opt {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.7);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .1s, color .1s;
    text-align: left;
    font-family: inherit;
    height: auto;
}
.cr-role-opt:hover { background: rgba(255,255,255,.07); color: #fff; }

/* ── Role row — member count chip ────────────────────────────── */
.cr-role-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 3px 9px 3px 8px;
    flex-shrink: 0;
    line-height: 1;
}
.cr-role-count svg { fill: currentColor; }

/* ── More-button dropdown ─────────────────────────────────────── */
.cr-btn-more-wrap {
    position: relative;
}
.cr-btn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.6);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s, color .12s;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    letter-spacing: 0;
}
.cr-btn-more:hover { background: rgba(255,255,255,.1); color: #fff; }
.cr-btn-more svg { fill: currentColor; pointer-events: none; }
.cr-more-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 160px;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 8px;
    padding: 4px;
    z-index: 400;
    box-shadow: 0 10px 36px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
    animation: crDropIn .12s ease;
}
.cr-btn-more-wrap.open .cr-more-menu { display: block; }
.cr-more-item {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.65);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s;
    text-align: left;
    font-family: inherit;
    height: auto;
}
.cr-more-item svg { fill: currentColor; flex-shrink: 0; }
.cr-more-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.cr-more-item.cr-delete:hover { background: rgba(239,68,68,.12); color: #ef4444; }
.cr-more-item.cr-action-kick:hover { background: rgba(239,68,68,.12); color: #ef4444; }

/* ── Media section (settings page) ───────────────────────────────────────── */
/* ── Clan Media Upload ────────────────────────────────────────────────────── */
.cmu-grid {
    display: grid;
    grid-template-columns: 164px 1fr;
    gap: 20px;
    align-items: start;
}

.cmu-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cmu-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: rgba(255,255,255,.4);
}

/* Upload zone */
.cmu-zone {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 1.5px dashed rgba(255,255,255,.11);
    background-color: rgba(255,255,255,.025);
    background-size: cover;
    background-position: center;
    transition: border-color .2s, box-shadow .2s;
}
.cmu-zone:not(.cmu-zone--readonly):hover {
    border-color: rgba(255,255,255,.28);
    box-shadow: 0 0 0 3px rgba(255,255,255,.04);
}
.cmu-zone--sq  { aspect-ratio: 1 / 1; width: 100%; }
.cmu-zone--wide {
    width: 100%;
    height: 134px;
}
.cmu-zone--readonly { cursor: default; border-style: solid; border-color: rgba(255,255,255,.08); }

.cmu-zone-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Upload hover overlay */
.cmu-zone-ov {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity .2s;
    background: rgba(0,0,0,.58);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    backdrop-filter: blur(2px);
}
.cmu-zone-ov svg { fill: #fff; }
.cmu-zone:not(.cmu-zone--readonly):hover .cmu-zone-ov { opacity: 1; }


/* Hints + sources */
.cmu-hint {
    font-size: 11px;
    color: rgba(255,255,255,.28);
    line-height: 1.55;
    margin: 0;
}
.cmu-banner-foot {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cmu-sources {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 11px;
    color: rgba(255,255,255,.28);
}
.cmu-src-link {
    font-weight: 600;
    color: var(--span, #7e9dff);
    text-decoration: none;
    opacity: .75;
    transition: opacity .15s;
}
.cmu-src-link:hover { opacity: 1; text-decoration: underline; }

/* Actions row */
.cmu-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

@media (max-width: 580px) {
    .cmu-grid { grid-template-columns: 1fr; }
}

/* ── Danger zone card ─────────────────────────────────────────── */
.cs-danger-zone { border-color: rgba(239,68,68,.2) !important; }
.cs-btn-danger {
    background: rgba(239,68,68,.1) !important;
    border-color: rgba(239,68,68,.4) !important;
    color: #ef4444 !important;
}
.cs-btn-danger:hover { background: rgba(239,68,68,.2) !important; }

/* ── Select in modal ──────────────────────────────────────────── */
.clan-settings-input option { background: #1a1a2e; color: #fff; }

/* ── Small colored dot inside role dropdown ───────────────────── */
.cr-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* ════════════════════════════════════════════════════════
   SHOP / UPGRADES TAB
   ════════════════════════════════════════════════════════ */

.cshop-wrapper {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.cshop-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,.28);
    margin: 0 0 12px;
    padding-left: 2px;
}

.cshop-grid {
    display: grid;
    gap: 10px;
}
.cshop-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ── Card ────────────────────────────────────────────────────────────────── */
.cshop-card {
    position: relative;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--br-16);
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* accent shimmer line at top — visible on hover */
.cshop-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--cshop-shimmer, linear-gradient(90deg, transparent, rgba(126,157,255,.5) 50%, transparent));
    opacity: 0;
    transition: opacity .25s;
    z-index: 2;
}

/* per-variant shimmer colors via :has() */
.cshop-card:has(.cshop-icon--time)  { --cshop-shimmer: linear-gradient(90deg, transparent, rgba(126,157,255,.55) 50%, transparent); }
.cshop-card:has(.cshop-icon--bank)  { --cshop-shimmer: linear-gradient(90deg, transparent, rgba(244,202,128,.55) 50%, transparent); }
.cshop-card:has(.cshop-icon--slots) { --cshop-shimmer: linear-gradient(90deg, transparent, rgba(167,139,250,.55) 50%, transparent); }
.cshop-card:has(.cshop-icon--roles) { --cshop-shimmer: linear-gradient(90deg, transparent, rgba(100,206,130,.45) 50%, transparent); }

.cshop-card:hover:not(.cshop-card--wip) {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.13);
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
}

.cshop-card:hover:not(.cshop-card--wip)::before {
    opacity: 1;
}

.cshop-card--wip { opacity: .48; }

/* ── Badge (top-right) ───────────────────────────────────────────────────── */
.cshop-card-badge {
    position: absolute;
    top: 13px;
    right: 13px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    color: rgba(255,255,255,.38);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--br-6);
    padding: 3px 8px;
    white-space: nowrap;
    z-index: 3;
}

.cshop-badge--wip {
    color: rgba(255,190,40,.6);
    background: rgba(255,190,40,.06);
    border-color: rgba(255,190,40,.14);
}

/* ── Card head (icon left + texts right, horizontal) ─────────────────────── */
.cshop-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    flex: 1; /* pushes footer to bottom regardless of text length */
}

/* ── Icon ────────────────────────────────────────────────────────────────── */
.cshop-card-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--br-12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

/* subtle radial glow emanating from icon */
.cshop-card-icon::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    opacity: .12;
    pointer-events: none;
    transition: opacity .22s;
}

.cshop-card:hover:not(.cshop-card--wip) .cshop-card-icon::after {
    opacity: .28;
}

.cshop-card-icon svg { fill: currentColor; position: relative; z-index: 1; }

.cshop-icon--time {
    background: rgba(126,157,255,.11);
    color: var(--span,#7e9dff);
    border: 1px solid rgba(126,157,255,.2);
}
.cshop-icon--time::after { background: radial-gradient(circle, var(--span,#7e9dff), transparent 70%); }

.cshop-icon--bank {
    background: rgba(244,202,128,.09);
    color: var(--money,#f4ca80);
    border: 1px solid rgba(244,202,128,.2);
}
.cshop-icon--bank::after { background: radial-gradient(circle, var(--money,#f4ca80), transparent 70%); }

.cshop-icon--slots {
    background: rgba(167,139,250,.09);
    color: #a78bfa;
    border: 1px solid rgba(167,139,250,.2);
}
.cshop-icon--slots::after { background: radial-gradient(circle, #a78bfa, transparent 70%); }

.cshop-icon--roles {
    background: rgba(100,206,130,.07);
    color: var(--green,#64ce82);
    border: 1px solid rgba(100,206,130,.16);
}
.cshop-icon--roles::after { background: radial-gradient(circle, var(--green,#64ce82), transparent 70%); }

/* ── Text block ──────────────────────────────────────────────────────────── */
.cshop-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cshop-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-default);
    margin: 0;
    line-height: 1.25;
    padding-right: 62px; /* clearance for the badge */
}

.cshop-card-desc {
    font-size: 12px;
    color: rgba(255,255,255,.36);
    line-height: 1.6;
    margin: 0;
}

/* ── Footer (price + button) ─────────────────────────────────────────────── */
.cshop-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.cshop-card-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-default);
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    letter-spacing: -.3px;
}

/* legacy — no longer used */
.cs-mode-panel.hidden { display: none; }

.cshop-card-price svg { fill: currentColor; flex-shrink: 0; }
.cshop-price--coins { color: var(--money,#f4ca80); }

/* "Куплено" badge in shop */
.cshop-bought-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(100,206,130,.12);
    color: #64ce82;
    border: 1px solid rgba(100,206,130,.25);
    letter-spacing: .3px;
}

/* Locked roles notice in settings */
.cs-roles-locked-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px;
    margin-bottom: 16px;
    border-radius: 10px;
    border: 1px dashed rgba(255,255,255,.12);
    background: rgba(255,255,255,.02);
    text-align: center;
    color: rgba(255,255,255,.4);
}
.cs-roles-locked-notice svg { opacity: .4; }
.cs-roles-locked-notice p { margin: 0; font-size: 13px; line-height: 1.55; }
.cs-roles-unlock-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--span, #7c6aff);
    text-decoration: none;
}
.cs-roles-unlock-link:hover { text-decoration: underline; }

/* Static (non-editable) role rows */
.cr-role-row--static { opacity: .55; pointer-events: none; }

/* ── Admin: Clan Management tab ─────────────────────────────────────────── */
.ca-clans-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ca-clans-search-wrap {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.ca-clans-search-wrap .clan-settings-input { flex: 1; min-width: 0; }

.ca-btn-danger-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 7px;
    border: 1px solid rgba(239,68,68,.4);
    background: rgba(239,68,68,.07);
    color: #ef4444;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.ca-btn-danger-outline:hover { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.65); }

.ca-cl-header {
    font-size: 12px;
    color: rgba(255,255,255,.38);
    margin-bottom: 10px;
}
.ca-cl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    margin-bottom: 8px;
    transition: background .15s;
}
.ca-cl-row:hover { background: rgba(255,255,255,.055); }

.ca-cl-avatar {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.ca-cl-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ca-cl-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-default);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ca-cl-name:hover { text-decoration: underline; }
.ca-cl-meta {
    font-size: 11px;
    color: rgba(255,255,255,.38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ca-cl-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.ca-cl-badge--open   { background: rgba(100,206,130,.12); color: #64ce82; border: 1px solid rgba(100,206,130,.22); }
.ca-cl-badge--closed { background: rgba(239,68,68,.1);    color: #f87171; border: 1px solid rgba(239,68,68,.2);    }

.ca-cl-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.ca-cl-edit-btn {
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.75);
    cursor: pointer;
    transition: background .15s;
}
.ca-cl-edit-btn:hover { background: rgba(255,255,255,.12); }
.ca-cl-link-btn {
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.75);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background .15s;
}
.ca-cl-link-btn:hover { background: rgba(255,255,255,.12); }
.ca-cl-del-btn {
    padding: 5px 10px;
    font-size: 11px;
    white-space: nowrap;
}

.ca-modal-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.cshop-buy-btn {
    padding: 9px 20px;
    border-radius: var(--br-8);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .1px;
}

/* ₽ button — warm gold glass */
.cshop-buy-btn--rub {
    background: rgba(244,202,128,.09);
    border: 1px solid rgba(244,202,128,.22);
    color: var(--money,#f4ca80);
}

.cshop-buy-btn--rub:hover:not(:disabled) {
    background: rgba(244,202,128,.18);
    border-color: rgba(244,202,128,.42);
    box-shadow: 0 0 18px rgba(244,202,128,.1);
    transform: translateY(-1px);
}

/* 🪙 button — purple glass */
.cshop-buy-btn--coins {
    background: rgba(167,139,250,.08);
    border: 1px solid rgba(167,139,250,.2);
    color: #a78bfa;
}

.cshop-buy-btn--coins:hover:not(:disabled) {
    background: rgba(167,139,250,.16);
    border-color: rgba(167,139,250,.4);
    box-shadow: 0 0 18px rgba(167,139,250,.1);
    transform: translateY(-1px);
}

.cshop-buy-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* WIP label */
.cshop-wip-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--br-8);
    background: transparent;
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.2);
    font-size: 12px;
    font-weight: 600;
    cursor: not-allowed;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .2px;
}

/* ── Level lock overlay ──────────────────────────────────────────────────── */
.cshop-card-lock {
    position: absolute;
    inset: 0;
    background: rgba(17,17,17,.84);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 10;
    text-align: center;
    padding: 16px;
    border-radius: var(--br-16);
}

.cshop-card-lock-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    position: relative;
    margin-bottom: 4px;
}

/* Simple padlock shape via pseudo-elements */
.cshop-card-lock-icon::before {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 9px;
    border-radius: 2px;
    background: rgba(255,255,255,.35);
}

.cshop-card-lock-icon::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 9px;
    border: 2px solid rgba(255,255,255,.35);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
}

.cshop-card-lock span {
    font-size: 11px;
    color: rgba(255,255,255,.38);
    letter-spacing: .3px;
    text-transform: uppercase;
    font-weight: 600;
}

.cshop-card-lock strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-default);
}

/* ── Duration picker (extend modal) ─────────────────────────────────────── */
.cshop-dur-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.cshop-dur-opt {
    padding: 16px 12px;
    border-radius: var(--br-12);
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
    gap: 6px;
    user-select: none;
}

.cshop-dur-opt:hover {
    border-color: rgba(126,157,255,.3);
    background: rgba(126,157,255,.05);
}

.cshop-dur-opt.selected {
    border-color: rgba(126,157,255,.55);
    background: rgba(126,157,255,.1);
    box-shadow: 0 0 0 1px rgba(126,157,255,.2) inset;
}

.cshop-dur-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-default);
}

.cshop-dur-days {
    font-size: 11px;
    color: rgba(255,255,255,.38);
    letter-spacing: .2px;
}

.cshop-dur-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--money,#f4ca80);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
}

.cshop-dur-price svg { fill: currentColor; }

/* ── Package cards (bank top-up modal) ───────────────────────────────────── */
.cshop-pkg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.cshop-pkg-card {
    padding: 18px 14px;
    border-radius: var(--br-12);
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.03);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .15s, background .15s;
}

.cshop-pkg-card:hover {
    border-color: rgba(244,202,128,.22);
    background: rgba(244,202,128,.04);
}

.cshop-pkg-coins {
    font-size: 20px;
    font-weight: 700;
    color: var(--money,#f4ca80);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
}

.cshop-pkg-coins svg { fill: var(--money,#f4ca80); flex-shrink: 0; }

.cshop-pkg-price {
    font-size: 13px;
    color: rgba(255,255,255,.45);
    font-weight: 600;
}

.cshop-pkg-buy {
    width: 100%;
    justify-content: center;
    margin-top: 2px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .cshop-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
    .cshop-dur-grid,
    .cshop-pkg-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .cshop-grid--3 { grid-template-columns: 1fr; }
}

/* ── Payment Confirm Modal ──────────────────────────────────── */
.cpay-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cpay-overlay.open { display: flex; animation: cpayFadeIn .18s ease; }
@keyframes cpayFadeIn { from { opacity:0; } to { opacity:1; } }
.cpay-modal {
    background: var(--card, #161b28);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 28px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04);
    animation: cpayUp .22s cubic-bezier(.34,1.4,.64,1);
    overflow: hidden;
}
@keyframes cpayUp {
    from { opacity:0; transform:translateY(28px) scale(.96); }
    to   { opacity:1; transform:translateY(0)    scale(1);   }
}
.cpay-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.cpay-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg,rgba(126,157,255,.18),rgba(126,157,255,.04));
    border: 1px solid rgba(126,157,255,.25);
    display: flex; align-items: center; justify-content: center;
    color: var(--span,#7e9dff);
}
.cpay-icon svg { fill: currentColor; }
.cpay-head-text { flex: 1; min-width: 0; }
.cpay-title { font-size: 16px; font-weight: 700; color: #fff; }
.cpay-subtitle { font-size: 12px; color: rgba(255,255,255,.38); margin-top: 3px; }
.cpay-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; border: none;
    background: transparent; color: rgba(255,255,255,.32); cursor: pointer;
    transition: background .15s, color .15s; flex-shrink: 0;
}
.cpay-close svg { fill: currentColor; }
.cpay-close:hover { background: rgba(255,255,255,.1); color: #fff; }
.cpay-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.cpay-info-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px; gap: 12px;
}
.cpay-info-label { font-size: 12px; color: rgba(255,255,255,.45); }
.cpay-info-value { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); max-width: 60%; word-break: break-all; text-align: right; }
.cpay-price-box {
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 6px;
    padding: 20px 16px;
    background: linear-gradient(135deg,rgba(126,157,255,.1),rgba(126,157,255,.02));
    border: 1px solid rgba(126,157,255,.22); border-radius: 14px;
}
.cpay-price-amount {
    font-size: 36px; font-weight: 800; color: var(--span,#7e9dff);
    line-height: 1; letter-spacing: -1px;
}
.cpay-price-unit { font-size: 13px; color: rgba(255,255,255,.4); }
.cpay-warn {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px;
    background: rgba(251,191,36,.05); border: 1px solid rgba(251,191,36,.16);
    border-radius: 10px; font-size: 12px; color: rgba(251,191,36,.8); line-height: 1.55;
}
.cpay-warn svg { fill: currentColor; flex-shrink: 0; margin-top: 1px; }
.cpay-footer { display: flex; gap: 10px; padding: 0 20px 22px; }
.cpay-btn-cancel {
    flex: 1; padding: 11px 16px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.6); font-size: 14px; font-weight: 500;
    cursor: pointer; transition: all .15s; font-family: inherit;
}
.cpay-btn-cancel:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
.cpay-btn-confirm {
    flex: 2; padding: 11px 16px; border-radius: 10px; border: none;
    background: var(--green); color: #fff;
    font-size: 14px; font-weight: 600; cursor: pointer; transition: all .18s;
    font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 7px;
}
.cpay-btn-confirm svg { fill: currentColor; }
.cpay-btn-confirm:hover { filter: brightness(1.12); }
.cpay-btn-confirm:active { filter: brightness(.96); }
.cpay-btn-confirm:disabled { opacity: .55; cursor: not-allowed; filter: none; }

/* ── Admin cooldown reset buttons ───────────────────────────── */
.ca-cd-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.ca-cd-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 500;
    border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.65); cursor: pointer; transition: all .15s; font-family: inherit;
}
.ca-cd-btn svg { fill: currentColor; flex-shrink: 0; }
.ca-cd-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.ca-cd-btn:disabled { opacity: .45; cursor: not-allowed; }
.ca-cd-btn--all {
    border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.07); color: rgba(239,68,68,.8);
}
.ca-cd-btn--all:hover { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.5); color: #ef4444; }