/* =====================================================
   CRIMORA CITY GANGS — HEADQUARTERS SYSTEM
===================================================== */

:root {
    --gang-bg: #090b0f;
    --gang-panel: #12161d;
    --gang-panel-soft: #171c24;
    --gang-line: rgba(255,255,255,.09);
    --gang-line-strong: rgba(224,184,76,.35);
    --gang-text: #f4f6f8;
    --gang-muted: #9aa3af;
    --gang-gold: #e0b84c;
    --gang-gold-bright: #ffd96a;
    --gang-green: #41d689;
    --gang-red: #ff626f;
    --gang-blue: #62a8ff;
    --gang-purple: #b580ff;
    --gang-orange: #ffaf56;
    --gang-shadow: 0 24px 70px rgba(0,0,0,.45);
}

[hidden] {
    display: none !important;
}

body.gang-modal-open {
    overflow: hidden;
}

.gang-page {
    width: min(1540px, calc(100% - 32px));
    margin: 16px auto 60px;
    color: var(--gang-text);
}

.gang-page button,
.gang-page input,
.gang-page textarea,
.gang-page select,
.gang-modal button,
.gang-modal input,
.gang-modal textarea,
.gang-modal select {
    font: inherit;
}

.gang-page-hero {
    position: relative;
    overflow: hidden;
    padding: 14px 18px;
    border: 1px solid var(--gang-line-strong);
    border-radius: 15px;
    background:
        radial-gradient(circle at 88% 15%, rgba(224,184,76,.2), transparent 30%),
        radial-gradient(circle at 8% 100%, rgba(98,168,255,.08), transparent 45%),
        linear-gradient(135deg, rgba(26,29,36,.98), rgba(8,10,14,.98));
    box-shadow: var(--gang-shadow), inset 0 1px rgba(255,255,255,.05);
}

.gang-page-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gang-gold), transparent 60%);
    opacity: .8;
}

.gang-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 30px 30px;
}

.gang-page-hero__eyebrow,
.gang-kicker {
    display: block;
    color: var(--gang-gold);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.gang-page-hero__content {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 5px;
}

.gang-page-hero h1 {
    margin: 0;
    font-size: clamp(20px, 2.6vw, 30px);
    line-height: 1.05;
    letter-spacing: -.03em;
}

.gang-page-hero p {
    max-width: 760px;
    margin: 5px 0 0;
    color: #bcc3cc;
    font-size: 12px;
    line-height: 1.4;
}

.gang-page-hero__seal {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid rgba(224,184,76,.5);
    border-radius: 14px;
    background: radial-gradient(circle at 35% 25%, rgba(224,184,76,.25), transparent 70%), rgba(0,0,0,.3);
    box-shadow: inset 0 1px rgba(255,255,255,.1), 0 10px 22px rgba(0,0,0,.4), 0 0 16px rgba(224,184,76,.15);
    font-size: 22px;
    transform: rotate(3deg);
}

.gang-system-notice {
    margin-top: 18px;
    padding: 15px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255,98,111,.35);
    background: rgba(100,22,30,.35);
    color: #ffd2d6;
}

.gang-system-notice--success {
    border-color: rgba(65,214,137,.35);
    background: rgba(17,83,52,.35);
    color: #c8ffe1;
}

.gang-loading-card {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    padding: 28px;
    border: 1px solid var(--gang-line);
    border-radius: 20px;
    background: var(--gang-panel);
    box-shadow: var(--gang-shadow);
}

.gang-loading-card strong,
.gang-loading-card span {
    display: block;
}

.gang-loading-card strong {
    font-size: 18px;
}

.gang-loading-card span {
    margin-top: 5px;
    color: var(--gang-muted);
}

.gang-loader,
.gang-tab-loader > span {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255,255,255,.12);
    border-top-color: var(--gang-gold);
    border-radius: 50%;
    animation: gangSpin .8s linear infinite;
}

@keyframes gangSpin {
    to { transform: rotate(360deg); }
}

.gang-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--gang-line);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(224,184,76,.05), transparent 55%),
        linear-gradient(145deg, rgba(27,32,41,.96), rgba(14,17,23,.98));
    box-shadow: 0 15px 45px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.04);
}

.gang-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(224,184,76,.35), transparent);
}

.gang-panel__heading,
.gang-section-heading,
.gang-tab-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.gang-panel__heading--compact {
    align-items: center;
}

.gang-panel__heading h2,
.gang-panel__heading h3,
.gang-section-heading h2,
.gang-tab-heading h2 {
    margin: 3px 0 0;
    font-size: 15px;
}

.gang-panel__heading h3 {
    font-size: 15px;
}

.gang-heading-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(224,184,76,.28);
    border-radius: 11px;
    background: radial-gradient(circle at 35% 25%, rgba(224,184,76,.2), transparent 70%), rgba(224,184,76,.08);
    box-shadow: inset 0 1px rgba(255,255,255,.06);
    font-size: 16px;
}

.gang-muted {
    color: var(--gang-muted);
    line-height: 1.5;
}

.gang-muted--small {
    font-size: 13px;
}

.gang-outsider-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
    gap: 12px;
    margin-top: 13px;
}

.gang-create-panel {
    padding: 16px;
}

.gang-outsider-sidebar {
    display: grid;
    align-content: start;
    gap: 12px;
}

.gang-outsider-sidebar .gang-panel {
    padding: 14px;
}

.gang-form {
    display: grid;
    gap: 11px;
}

.gang-form--stacked {
    margin-top: 13px;
}

.gang-form label,
.gang-modal-field {
    display: grid;
    gap: 5px;
}

.gang-form label > span,
.gang-modal-field > span {
    color: #d8dde4;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}

.gang-form small {
    color: #78828f;
    font-size: 11px;
    line-height: 1.4;
}

.gang-form input,
.gang-form textarea,
.gang-form select,
.gang-modal-field input,
.gang-modal-field textarea,
.gang-modal-field select,
.gang-search-field input,
.gang-chat-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 10px;
    outline: none;
    background: rgba(5,7,10,.72);
    color: var(--gang-text);
    font-size: 13px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.gang-form input,
.gang-form select,
.gang-modal-field input,
.gang-modal-field select,
.gang-search-field input {
    min-height: 36px;
    padding: 0 11px;
}

.gang-form textarea,
.gang-modal-field textarea,
.gang-chat-form textarea {
    padding: 9px 11px;
    resize: vertical;
}

.gang-form input:focus,
.gang-form textarea:focus,
.gang-form select:focus,
.gang-modal-field input:focus,
.gang-modal-field textarea:focus,
.gang-modal-field select:focus,
.gang-search-field input:focus,
.gang-chat-form textarea:focus {
    border-color: var(--gang-gold);
    background: rgba(8,10,13,.95);
    box-shadow: 0 0 0 3px rgba(224,184,76,.12);
}

.gang-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.gang-form--inline {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-top: 18px;
}

.gang-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 850;
    letter-spacing: .01em;
    transition: transform .18s, border-color .18s, background .18s, box-shadow .18s, opacity .18s;
}

.gang-btn:hover:not(:disabled) {
    transform: translateY(-2px);
}

.gang-btn:disabled {
    cursor: not-allowed;
    opacity: .42;
}

.gang-btn--primary {
    border-color: rgba(255,217,106,.75);
    background: linear-gradient(180deg, var(--gang-gold-bright), #c8962b);
    color: #171207;
    box-shadow: 0 8px 22px rgba(224,184,76,.16);
}

.gang-btn--primary:hover:not(:disabled) {
    box-shadow: 0 11px 28px rgba(224,184,76,.3);
}

.gang-btn--secondary {
    border-color: rgba(255,255,255,.13);
    background: rgba(255,255,255,.055);
    color: var(--gang-text);
}

.gang-btn--secondary:hover:not(:disabled) {
    border-color: rgba(224,184,76,.45);
    background: rgba(224,184,76,.08);
}

.gang-btn--danger {
    border-color: rgba(255,98,111,.45);
    background: rgba(125,23,33,.72);
    color: #ffe2e5;
}

.gang-btn--warning {
    border-color: rgba(255,175,86,.5);
    background: rgba(119,66,12,.72);
    color: #ffe0b4;
}

.gang-btn--wide {
    width: 100%;
}

.gang-text-btn {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gang-gold-bright);
    cursor: pointer;
    font-weight: 800;
}

.gang-status-card {
    display: flex;
    gap: 11px;
    align-items: flex-start;
}

.gang-status-card__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    background: radial-gradient(circle at 35% 25%, rgba(98,168,255,.25), transparent 70%), rgba(98,168,255,.1);
    border: 1px solid rgba(98,168,255,.25);
    box-shadow: inset 0 1px rgba(255,255,255,.06);
    font-size: 16px;
}

.gang-status-card h3,
.gang-status-card p {
    margin: 3px 0 0;
}

.gang-status-card h3 {
    font-size: 14px;
}

.gang-status-card p {
    color: var(--gang-muted);
    font-size: 11.5px;
    line-height: 1.4;
}

.gang-status-card--pending {
    border-color: rgba(255,175,86,.3);
}

.gang-status-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.gang-status-card__cancel {
    margin-top: 12px;
}

.gang-explainer ul {
    display: grid;
    gap: 7px;
    padding-left: 16px;
    color: var(--gang-muted);
    font-size: 12px;
    line-height: 1.4;
}

.gang-count-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(224,184,76,.28);
    border-radius: 999px;
    background: rgba(224,184,76,.08);
    color: var(--gang-gold-bright);
    font-weight: 900;
}

.gang-invitation-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.gang-invitation-card {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 13px;
    border: 1px solid var(--gang-line);
    border-radius: 13px;
    background: rgba(0,0,0,.22);
}

.gang-invitation-card strong,
.gang-invitation-card span,
.gang-invitation-card small {
    display: block;
}

.gang-invitation-card span,
.gang-invitation-card small {
    margin-top: 3px;
    color: var(--gang-muted);
    font-size: 12px;
}

.gang-inline-actions,
.gang-table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gang-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 10px;
    background: rgba(255,255,255,.055);
    color: #f4f6f8;
    cursor: pointer;
    transition: .18s;
}

.gang-icon-btn:hover {
    transform: translateY(-2px);
    border-color: var(--gang-gold);
}

.gang-icon-btn--accept {
    color: #aaffcf;
    border-color: rgba(65,214,137,.28);
}

.gang-icon-btn--reject {
    color: #ffb1b8;
    border-color: rgba(255,98,111,.28);
}

.gang-directory-section {
    margin-top: 18px;
}

.gang-section-heading {
    align-items: center;
    margin-bottom: 11px;
}

.gang-section-heading h2 {
    font-size: 19px;
}

.gang-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(330px, 100%);
    padding-left: 13px;
    border: 1px solid var(--gang-line);
    border-radius: 13px;
    background: rgba(10,12,16,.75);
}

.gang-search-field input {
    border: 0;
    background: transparent;
    box-shadow: none !important;
}

.gang-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.gang-directory-card,
.gang-hq-banner,
.gang-public-modal {
    --gang-accent: var(--gang-gold);
}

.gang-accent--red { --gang-accent: #ff626f; }
.gang-accent--blue { --gang-accent: #62a8ff; }
.gang-accent--purple { --gang-accent: #b580ff; }
.gang-accent--green { --gang-accent: #41d689; }
.gang-accent--gold { --gang-accent: #e0b84c; }

.gang-banner--noir {
    background-image: radial-gradient(circle at 85% 5%, color-mix(in srgb, var(--gang-accent) 18%, transparent), transparent 28%), linear-gradient(145deg, #1b2028, #0b0e13);
}

.gang-banner--city {
    background-image: linear-gradient(rgba(6,8,12,.72), rgba(6,8,12,.94)), radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--gang-accent) 22%, transparent), transparent 28%), linear-gradient(125deg, #253044, #0a0c10);
}

.gang-banner--warehouse {
    background-image: linear-gradient(135deg, rgba(58,46,32,.96), rgba(10,10,11,.98));
}

.gang-banner--neon {
    background-image: radial-gradient(circle at 15% 20%, rgba(181,128,255,.2), transparent 30%), radial-gradient(circle at 85% 80%, rgba(98,168,255,.18), transparent 35%), linear-gradient(145deg, #181329, #08090d);
}

.gang-banner--royal {
    background-image: radial-gradient(circle at 85% 15%, rgba(224,184,76,.25), transparent 28%), linear-gradient(145deg, #302413, #0d0b09);
}

.gang-directory-card {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--gang-accent) 26%, rgba(255,255,255,.08));
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,.3);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}

.gang-directory-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--gang-accent) 60%, transparent);
    box-shadow: 0 22px 52px rgba(0,0,0,.4);
}

.gang-directory-card__top,
.gang-directory-card__actions,
.gang-public-modal__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.gang-emblem {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid color-mix(in srgb, var(--gang-accent) 56%, transparent);
    border-radius: 16px;
    background: rgba(0,0,0,.38);
    color: var(--gang-accent);
    font-size: 17px;
    font-weight: 950;
    letter-spacing: .08em;
    box-shadow: inset 0 1px rgba(255,255,255,.07);
}

.gang-emblem--large {
    width: 86px;
    height: 86px;
    border-radius: 24px;
    font-size: 24px;
}

.gang-recruitment-pill,
.gang-rank-chip,
.gang-live-chip,
.gang-joined-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 31px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.gang-recruitment-pill--open,
.gang-live-chip,
.gang-joined-chip {
    border: 1px solid rgba(65,214,137,.28);
    background: rgba(65,214,137,.09);
    color: #9ff4c6;
}

.gang-recruitment-pill--closed {
    border: 1px solid rgba(255,98,111,.25);
    background: rgba(255,98,111,.08);
    color: #ffadb5;
}

.gang-live-chip i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gang-green);
    box-shadow: 0 0 0 4px rgba(65,214,137,.13);
}

.gang-directory-card h3 {
    margin: 22px 0 0;
    font-size: 25px;
}

.gang-directory-card__motto {
    min-height: 42px;
    color: #aeb6c1;
    line-height: 1.5;
}

.gang-directory-card__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 20px;
}

.gang-directory-card__metrics span {
    padding: 11px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: rgba(0,0,0,.22);
    color: #87919e;
    font-size: 12px;
}

.gang-directory-card__metrics strong {
    display: block;
    margin-bottom: 3px;
    color: var(--gang-text);
    font-size: 15px;
}

.gang-directory-card__leader {
    margin-top: 17px;
    color: var(--gang-muted);
}

.gang-directory-card__actions {
    margin-top: 20px;
}

.gang-directory-card__actions .gang-btn {
    flex: 1;
}

/* Compact outsider directory: existing gangs are rows rather than cards. */
.gang-directory-list {
    border-top: 1px solid var(--gang-line);
    border-bottom: 1px solid var(--gang-line);
}

.gang-directory-row {
    --gang-accent: var(--gang-gold);
    display: grid;
    grid-template-columns: minmax(250px, 1.4fr) auto minmax(330px, .9fr) auto;
    gap: 18px;
    align-items: center;
    min-width: 0;
    padding: 14px 10px;
    border-bottom: 1px solid var(--gang-line);
    transition: background .16s ease, border-color .16s ease;
}

.gang-directory-row:last-child { border-bottom: 0; }
.gang-directory-row:hover { background: color-mix(in srgb, var(--gang-accent) 5%, transparent); }
.gang-directory-row[hidden] { display: none; }

.gang-directory-row__identity {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.gang-directory-row__emblem {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid color-mix(in srgb, var(--gang-accent) 55%, transparent);
    border-radius: 11px;
    color: var(--gang-accent);
    background: rgba(0,0,0,.28);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .07em;
}

.gang-directory-row h3,
.gang-directory-row p { margin: 0; }
.gang-directory-row h3 { overflow: hidden; color: var(--gang-text); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.gang-directory-row p { overflow: hidden; margin-top: 3px; color: #8f99a6; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.gang-directory-row__identity small { display: block; margin-top: 4px; color: var(--gang-muted); font-size: 10px; }
.gang-directory-row__identity small strong { color: #c9d0d9; }

.gang-directory-row__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(62px, 1fr));
    gap: 8px;
    margin: 0;
}

.gang-directory-row__metrics div { min-width: 0; }
.gang-directory-row__metrics dt { color: #737f8d; font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.gang-directory-row__metrics dd { margin: 3px 0 0; color: #e7ebf0; font-size: 13px; font-weight: 900; }
.gang-directory-row__action { min-width: 120px; white-space: nowrap; }

@media (max-width: 980px) {
    .gang-directory-row { grid-template-columns: minmax(230px, 1fr) auto auto; }
    .gang-directory-row__metrics { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 620px) {
    .gang-directory-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 13px 4px; }
    .gang-directory-row__metrics { grid-column: 1 / -1; }
    .gang-directory-row__action { grid-column: 1 / -1; width: 100%; }
}

.gang-hq-banner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    min-height: 188px;
    margin-top: 24px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--gang-accent) 38%, rgba(255,255,255,.1));
    border-radius: 24px;
    box-shadow: var(--gang-shadow);
}

.gang-hq-banner__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,.2), transparent 55%, rgba(0,0,0,.2));
}

.gang-hq-banner__identity,
.gang-hq-banner__rank {
    position: relative;
    z-index: 1;
}

.gang-hq-banner__identity {
    display: flex;
    align-items: center;
    gap: 22px;
}

.gang-hq-banner h2 {
    margin: 6px 0 4px;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -.04em;
}

.gang-hq-banner p {
    margin: 8px 0 0;
    color: #bdc5ce;
}

.gang-hq-banner__rank {
    min-width: 170px;
    padding: 17px 20px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 15px;
    background: rgba(0,0,0,.32);
    text-align: right;
}

.gang-hq-banner__rank span,
.gang-hq-banner__rank strong {
    display: block;
}

.gang-hq-banner__rank span {
    color: #9da6b2;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.gang-hq-banner__rank strong {
    margin-top: 5px;
    color: var(--gang-accent);
    font-size: 22px;
}

.gang-announcement-strip,
.gang-empty-announcement {
    width: 100%;
    box-sizing: border-box;
    margin-top: 15px;
    border: 1px solid rgba(98,168,255,.25);
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(31,74,125,.25), rgba(19,24,31,.95));
}

.gang-announcement-strip {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 18px;
}

.gang-announcement-strip__icon {
    font-size: 26px;
}

.gang-announcement-strip div {
    flex: 1;
}

.gang-announcement-strip strong,
.gang-announcement-strip p {
    display: block;
    margin: 0;
}

.gang-announcement-strip p {
    margin-top: 3px;
    color: #c3ccd6;
    line-height: 1.45;
}

.gang-empty-announcement {
    padding: 14px 18px;
    color: #b9d7ff;
    cursor: pointer;
    text-align: left;
}

.gang-chain-strip {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 15px;
    padding: 15px 18px;
    border-radius: 16px;
}

.gang-chain-strip.is-idle {
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(19,24,31,.6);
}

.gang-chain-strip.is-ramping {
    border: 1px solid rgba(240,201,85,.35);
    background: linear-gradient(90deg, rgba(150,110,20,.22), rgba(19,24,31,.95));
}

.gang-chain-strip.is-live {
    border: 1px solid rgba(210,73,85,.4);
    background: linear-gradient(90deg, rgba(150,45,50,.25), rgba(19,24,31,.95));
    animation: gang-chain-pulse 2.4s ease-in-out infinite;
}

.gang-chain-strip.is-cooldown {
    border: 1px solid rgba(80,160,220,.35);
    background: linear-gradient(90deg, rgba(30,90,140,.22), rgba(19,24,31,.95));
}

@keyframes gang-chain-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(210,73,85,0); }
    50% { box-shadow: 0 0 24px rgba(210,73,85,.28); }
}

@media (prefers-reduced-motion: reduce) {
    .gang-chain-strip.is-live { animation: none; }
}

.gang-chain-strip__icon {
    font-size: 26px;
}

.gang-chain-strip__copy {
    flex: 1;
    min-width: 0;
}

.gang-chain-strip__copy strong {
    display: block;
    font-size: .92rem;
}

.gang-chain-strip__copy strong em {
    margin-left: 6px;
    color: #f0c955;
    font-style: normal;
    font-weight: 900;
}

.gang-chain-strip__copy span {
    display: block;
    margin-top: 3px;
    color: #c3ccd6;
    font-size: .68rem;
    line-height: 1.45;
}

.gang-chain-strip__timer {
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: #fff;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
}

.gang-dashboard-metrics,
.gang-vault-history-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 9px;
}

.gang-metric-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--gang-line);
    border-radius: 12px;
    background: radial-gradient(circle at 100% 0%, rgba(224,184,76,.06), transparent 60%), linear-gradient(145deg, rgba(25,30,38,.96), rgba(12,15,20,.96));
    box-shadow: 0 10px 24px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.03);
}

.gang-metric-card__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(224,184,76,.22);
    border-radius: 11px;
    background: rgba(224,184,76,.07);
    font-size: 16px;
}

.gang-metric-card span,
.gang-metric-card strong,
.gang-metric-card small {
    display: block;
}

.gang-metric-card div > span {
    color: #89939f;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.gang-metric-card strong {
    overflow: hidden;
    margin-top: 2px;
    color: #f7f8fa;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gang-metric-card small {
    margin-top: 2px;
    color: #727d8a;
    font-size: 9.5px;
}

.gang-hq-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.gang-tab-nav {
    position: sticky;
    top: 90px;
    align-self: start;
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--gang-line);
    border-radius: 13px;
    background: rgba(14,17,22,.94);
    box-shadow: 0 16px 45px rgba(0,0,0,.3);
    backdrop-filter: blur(12px);
}

.gang-tab-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #9fa8b4;
    cursor: pointer;
    text-align: left;
    transition: .18s;
}

.gang-tab-button__icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    overflow: hidden;
    border-radius: 8px;
}

.gang-tab-button__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.45));
    transition: transform .18s ease, filter .18s ease;
}

.gang-tab-button strong {
    flex: 1;
    font-size: 13px;
}

.gang-tab-button em {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(255,98,111,.16);
    color: #ff9da6;
    font-style: normal;
    font-size: 11px;
}

.gang-tab-button:hover,
.gang-tab-button.is-active {
    border-color: rgba(224,184,76,.23);
    background: rgba(224,184,76,.08);
    color: #f2d680;
}

.gang-tab-button:hover .gang-tab-button__icon img,
.gang-tab-button.is-active .gang-tab-button__icon img {
    transform: scale(1.07);
    filter: drop-shadow(0 4px 9px rgba(0,0,0,.55)) brightness(1.08);
}

.gang-tab-button.is-active::before {
    content: "";
    position: absolute;
    left: -1px;
    width: 3px;
    height: 24px;
    border-radius: 999px;
    background: var(--gang-gold);
    box-shadow: 0 0 12px rgba(224,184,76,.5);
}

.gang-tab-content {
    min-width: 0;
}

.gang-tab-loader {
    display: grid;
    justify-items: center;
    gap: 12px;
    min-height: 280px;
    place-content: center;
    color: var(--gang-muted);
}

.gang-tab-heading {
    align-items: center;
    margin-bottom: 11px;
    padding: 2px 3px;
}

.gang-tab-heading h2 {
    font-size: 18px;
}

.gang-tab-heading p {
    max-width: 740px;
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--gang-muted);
    line-height: 1.55;
}

.gang-rank-chip {
    border: 1px solid rgba(224,184,76,.3);
    background: rgba(224,184,76,.09);
    color: var(--gang-gold-bright);
}

.gang-overview-grid,
.gang-recruitment-grid,
.gang-vault-grid,
.gang-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.gang-overview-grid .gang-panel,
.gang-recruitment-grid .gang-panel,
.gang-vault-grid .gang-panel,
.gang-settings-grid > .gang-panel,
.gang-settings-sidebar .gang-panel,
.gang-operation-spotlight,
.gang-tab-content > .gang-panel {
    padding: 13px;
}

.gang-availability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 11px;
}

.gang-availability-item {
    display: flex;
    gap: 8px;
    padding: 9px;
    border: 1px solid var(--gang-line);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(255,255,255,.03), transparent), rgba(0,0,0,.19);
}

.gang-availability-item > span {
    font-size: 15px;
}

.gang-availability-item strong,
.gang-availability-item small {
    display: block;
}

.gang-availability-item small {
    margin-top: 2px;
    color: #7d8793;
    font-size: 10.5px;
    line-height: 1.3;
}

.gang-detail-list {
    display: grid;
    gap: 2px;
    margin: 10px 0 0;
}

.gang-detail-list > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,.065);
    font-size: 12px;
}

.gang-detail-list dt {
    color: var(--gang-muted);
}

.gang-detail-list dd {
    margin: 0;
    font-weight: 850;
    text-align: right;
}

.gang-operation-spotlight {
    margin-top: 11px;
}

.gang-operation-spotlight__empty,
.gang-operation-spotlight__active {
    display: flex;
    align-items: center;
    gap: 20px;
}

.gang-operation-spotlight__empty > span,
.gang-operation-spotlight__icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border: 1px solid rgba(224,184,76,.2);
    border-radius: 18px;
    background: rgba(224,184,76,.07);
    font-size: 28px;
}

.gang-operation-spotlight__empty > div,
.gang-operation-spotlight__content {
    flex: 1;
}

.gang-operation-spotlight h3 {
    margin: 6px 0 4px;
    font-size: 23px;
}

.gang-operation-spotlight p {
    margin: 0;
    color: var(--gang-muted);
    line-height: 1.5;
}

.gang-operation-progress {
    display: flex;
    gap: 24px;
    margin-top: 15px;
}

.gang-operation-progress span,
.gang-operation-progress strong {
    display: block;
}

.gang-operation-progress span {
    color: #7e8895;
    font-size: 11px;
    text-transform: uppercase;
}

.gang-operation-progress strong {
    margin-top: 3px;
}

.gang-activity-feed {
    display: grid;
    margin-top: 15px;
}

.gang-activity-feed--full {
    margin-top: 0;
}

.gang-activity-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.065);
}

.gang-activity-row:last-child {
    border-bottom: 0;
}

.gang-activity-row__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--gang-line);
    border-radius: 11px;
    background: rgba(0,0,0,.21);
}

.gang-activity-row strong,
.gang-activity-row p {
    display: block;
    margin: 0;
}

.gang-activity-row p {
    margin-top: 3px;
    color: #9aa3af;
    line-height: 1.4;
}

.gang-activity-row time {
    color: #697481;
    font-size: 12px;
    white-space: nowrap;
}

.gang-empty-inline,
.gang-permission-note {
    padding: 20px;
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 13px;
    color: #858f9c;
    text-align: center;
}

.gang-empty-state {
    display: grid;
    justify-items: center;
    padding: 50px 26px;
    text-align: center;
}

.gang-empty-state--small {
    grid-column: 1 / -1;
}

.gang-empty-state__icon {
    font-size: 42px;
}

.gang-empty-state h2,
.gang-empty-state h3 {
    margin: 14px 0 4px;
}

.gang-empty-state p {
    max-width: 570px;
    color: var(--gang-muted);
}

.gang-member-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--gang-line);
    border-radius: 13px;
    background: var(--gang-panel);
    box-shadow: 0 15px 45px rgba(0,0,0,.25);
}

.gang-member-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse;
}

.gang-member-table th,
.gang-member-table td {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255,255,255,.065);
    text-align: left;
    vertical-align: middle;
    font-size: 12.5px;
}

.gang-member-table th {
    background: rgba(0,0,0,.2);
    color: #7f8a97;
    font-size: 10px;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.gang-member-table tbody tr:hover {
    background: rgba(255,255,255,.022);
}

.gang-member-identity {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--gang-text);
    text-decoration: none;
}

.gang-avatar-wrap {
    position: relative;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
}

.gang-avatar-wrap::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: 1px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--gang-panel);
    border-radius: 50%;
    background: #606975;
}

.gang-avatar-wrap.is-online::after {
    background: var(--gang-green);
}

.gang-avatar-wrap.is-idle::after {
    background: #e0b84c;
}

.gang-member-identity img,
.gang-application-card__identity img,
.gang-chat-message img,
.gang-public-member-list img {
    display: block;
    width: 43px;
    height: 43px;
    min-width: 43px;
    max-width: 43px;
    aspect-ratio: 1;
    border-radius: 13px;
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(255,255,255,.12);
    background: #0b0e13;
}

.gang-member-identity strong,
.gang-member-identity small,
.gang-application-card__identity strong,
.gang-application-card__identity span {
    display: block;
}

.gang-member-identity small,
.gang-application-card__identity span,
.gang-table-note {
    margin-top: 3px;
    color: #788390;
    font-size: 12px;
}

.gang-rank-badge,
.gang-member-status {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    font-size: 11px;
    font-weight: 850;
}

.gang-rank-badge--boss { color: #ffe083; border-color: rgba(224,184,76,.3); background: rgba(224,184,76,.09); }
.gang-rank-badge--underboss { color: #d1b0ff; border-color: rgba(181,128,255,.3); background: rgba(181,128,255,.09); }
.gang-rank-badge--captain { color: #9ac7ff; border-color: rgba(98,168,255,.3); background: rgba(98,168,255,.09); }
.gang-rank-badge--soldier { color: #a4ecc6; border-color: rgba(65,214,137,.27); background: rgba(65,214,137,.08); }
.gang-rank-badge--associate { color: #b5bdc7; }

.gang-member-status--available,
.gang-member-status--online { color: #a7f4ca; border-color: rgba(65,214,137,.25); }
.gang-member-status--idle { color: #ffe083; border-color: rgba(224,184,76,.3); background: rgba(224,184,76,.08); }
.gang-member-status--offline { color: #a6adb7; border-color: rgba(166,173,183,.2); }
.gang-member-status--hospital { color: #9bcfff; border-color: rgba(98,168,255,.25); }
.gang-member-status--prison { color: #ffb0b7; border-color: rgba(255,98,111,.25); }

.gang-application-list {
    display: grid;
    gap: 13px;
    margin-top: 17px;
}

.gang-application-card {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(250px, 1fr) minmax(230px, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px;
    border: 1px solid var(--gang-line);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255,255,255,.025), transparent), rgba(0,0,0,.18);
}

.gang-application-card__identity {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--gang-text);
    text-decoration: none;
}

.gang-application-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gang-application-card__stats span {
    padding: 5px 7px;
    border: 1px solid var(--gang-line);
    border-radius: 8px;
    color: #87919e;
    font-size: 10px;
}

.gang-application-card__stats strong {
    color: #e5e9ed;
}

.gang-application-card blockquote {
    margin: 0;
    padding-left: 13px;
    border-left: 2px solid rgba(224,184,76,.35);
    color: #a6afb9;
    line-height: 1.5;
}

.gang-vault-total {
    min-width: 150px;
    padding: 9px 12px;
    border: 1px solid rgba(65,214,137,.25);
    border-radius: 11px;
    background: radial-gradient(circle at 100% 0%, rgba(65,214,137,.12), transparent 60%), rgba(65,214,137,.07);
    box-shadow: inset 0 1px rgba(255,255,255,.05);
    text-align: right;
}

.gang-vault-total span,
.gang-vault-total strong {
    display: block;
}

.gang-vault-total span {
    color: #8ebda5;
    font-size: 9.5px;
    text-transform: uppercase;
}

.gang-vault-total strong {
    margin-top: 2px;
    color: #aff5cf;
    font-size: 16px;
    text-shadow: 0 0 12px rgba(65,214,137,.3);
}

.gang-vault-action {
    overflow: hidden;
}

.gang-vault-action::after {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -70px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(65,214,137,.05);
}

.gang-vault-action--withdraw::after {
    background: rgba(98,168,255,.05);
}

.gang-vault-action__icon {
    display: block;
    margin-bottom: 10px;
    font-size: 24px;
}

.gang-vault-action h3 {
    margin: 4px 0 0;
    font-size: 17px;
}

.gang-vault-action p {
    color: var(--gang-muted);
    line-height: 1.6;
}

.gang-form--money {
    position: relative;
    z-index: 1;
    margin-top: 20px;
}

.gang-money-input {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 12px;
    background: rgba(5,7,10,.72);
}

.gang-money-input b {
    padding-left: 14px;
    color: var(--gang-green);
}

.gang-money-input input {
    border: 0;
    background: transparent;
    box-shadow: none !important;
}

.gang-vault-history-grid {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 17px;
}

.gang-operation-grid,
.gang-upgrade-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    margin-bottom: 18px;
}

.gang-upgrade-view-toggle {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 16px;
    padding: 4px;
    border: 1px solid var(--gang-line);
    border-radius: 12px;
    background: rgba(255,255,255,.03);
}

.gang-upgrade-view-toggle button {
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #9aa3af;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.gang-upgrade-view-toggle button:hover {
    color: var(--gang-text);
}

.gang-upgrade-view-toggle button.is-active {
    border-color: rgba(224,184,76,.35);
    background: rgba(224,184,76,.12);
    color: var(--gang-gold-bright);
}

.gang-upgrade-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.gang-upgrade-row {
    display: grid;
    grid-template-columns: 44px minmax(0,1.4fr) minmax(0,1.3fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border: 1px solid var(--gang-line);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(25,30,39,.96), rgba(12,15,20,.98));
}

.gang-upgrade-row.is-maxed {
    position: relative;
    overflow: hidden;
    border-color: rgba(181,128,255,.25);
}

.gang-upgrade-row.is-locked {
    border-color: rgba(210,73,85,.3);
}

.gang-upgrade-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gang-upgrade-row__icon .gang-upgrade-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.gang-upgrade-row__identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gang-upgrade-row__identity strong {
    font-size: 13px;
}

.gang-upgrade-row__identity span {
    color: #808b98;
    font-size: 10px;
}

.gang-upgrade-row__effect {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gang-upgrade-row__effect small {
    color: #808b98;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.gang-upgrade-row__effect span {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gang-upgrade-row__price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}

.gang-upgrade-row__price small {
    color: #808b98;
    font-size: 9px;
    text-transform: uppercase;
}

.gang-upgrade-row__price strong {
    font-size: 12px;
    color: var(--gang-gold-bright);
}

.gang-upgrade-row__locked {
    overflow: hidden;
    color: #ffb3b8;
    font-size: 10px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gang-btn--compact {
    min-height: 34px;
    padding: 0 14px;
    font-size: 11px;
}

@media (max-width: 780px) {
    .gang-upgrade-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
    }
    .gang-upgrade-row__identity {
        flex: 1 1 auto;
        min-width: 120px;
    }
    .gang-upgrade-row__effect {
        flex: 1 1 100%;
        order: 3;
    }
    .gang-upgrade-row__price,
    .gang-upgrade-row__locked {
        flex: 1 1 auto;
        order: 4;
        text-align: left;
    }
    .gang-upgrade-row > button {
        order: 5;
        flex: 0 0 auto;
    }
}

.gang-operation-card,
.gang-upgrade-card {
    padding: 23px;
    border: 1px solid var(--gang-line);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(25,30,39,.96), rgba(12,15,20,.98));
    box-shadow: 0 14px 38px rgba(0,0,0,.25);
}

.gang-operation-card__icon {
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    margin-bottom: 17px;
    border: 1px solid rgba(224,184,76,.22);
    border-radius: 16px;
    background: rgba(224,184,76,.07);
    font-size: 27px;
}

.gang-operation-card h3,
.gang-upgrade-card h3 {
    margin: 6px 0 0;
    font-size: 23px;
}

.gang-operation-card > p,
.gang-upgrade-card > p {
    color: var(--gang-muted);
    line-height: 1.55;
}

.gang-operation-card__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 18px 0;
}

.gang-operation-card__details > div {
    padding: 11px;
    border: 1px solid var(--gang-line);
    border-radius: 11px;
    background: rgba(0,0,0,.2);
}

.gang-operation-card__details span,
.gang-operation-card__details strong {
    display: block;
}

.gang-operation-card__details span {
    color: #77818e;
    font-size: 11px;
}

.gang-operation-card__details strong {
    margin-top: 4px;
}

.gang-upgrade-benefit {
    display: block;
    margin: -4px 0 14px;
    color: #9ed1ff;
}

.gang-operation-control {
    margin-bottom: 18px;
}

.gang-operation-control__header {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
}

.gang-operation-control__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(224,184,76,.24);
    border-radius: 17px;
    background: rgba(224,184,76,.08);
    font-size: 27px;
}

.gang-operation-control h3 {
    margin: 6px 0 3px;
    font-size: 26px;
}

.gang-operation-control p {
    margin: 0;
    color: var(--gang-muted);
    line-height: 1.5;
}

.gang-operation-control__timer {
    min-width: 190px;
    padding: 14px 16px;
    border: 1px solid rgba(255,175,86,.24);
    border-radius: 13px;
    background: rgba(255,175,86,.07);
    text-align: right;
}

.gang-operation-control__timer span,
.gang-operation-control__timer strong {
    display: block;
}

.gang-operation-control__timer span {
    color: #bc976f;
    font-size: 11px;
    text-transform: uppercase;
}

.gang-operation-control__timer strong {
    margin-top: 4px;
    color: #ffd2a0;
    font-size: 21px;
}

.gang-operation-readiness {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid rgba(255,175,86,.22);
    border-radius: 14px;
    background: rgba(255,175,86,.055);
}

.gang-operation-readiness.is-ready {
    border-color: rgba(65,214,137,.23);
    background: rgba(65,214,137,.055);
}

.gang-operation-readiness > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.gang-readiness-bar {
    height: 9px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0,0,0,.38);
}

.gang-readiness-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gang-orange), var(--gang-gold-bright));
}

.gang-operation-readiness.is-ready .gang-readiness-bar span {
    background: linear-gradient(90deg, #2ebd73, #7bf0ae);
}

.gang-operation-readiness p {
    margin-top: 9px;
    font-size: 13px;
}

.gang-operation-crew {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 17px;
}

.gang-operation-crew__slot {
    display: grid;
    justify-items: center;
    min-height: 130px;
    padding: 14px;
    border: 1px dashed rgba(255,255,255,.14);
    border-radius: 14px;
    place-content: center;
    background: rgba(0,0,0,.15);
    text-align: center;
}

.gang-operation-crew__slot.is-filled {
    border-style: solid;
    border-color: rgba(65,214,137,.2);
    background: rgba(65,214,137,.045);
}

.gang-operation-crew__slot > span {
    color: #606b78;
    font-size: 28px;
}

.gang-operation-crew__slot img {
    width: 46px;
    height: 46px;
    margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;
    object-fit: cover;
}

.gang-operation-crew__slot strong,
.gang-operation-crew__slot small {
    display: block;
}

.gang-operation-crew__slot small {
    margin-top: 4px;
    color: #77818d;
}

.gang-operation-control__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.gang-operation-history {
    display: grid;
    margin-top: 14px;
}

.gang-operation-history__row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    gap: 13px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.065);
}

.gang-operation-history__row > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,.05);
}

.gang-operation-history__row--completed > span { color: #9af1c3; background: rgba(65,214,137,.08); }
.gang-operation-history__row--failed > span { color: #ff9ea7; background: rgba(255,98,111,.08); }

.gang-operation-history__row strong,
.gang-operation-history__row small {
    display: block;
}

.gang-operation-history__row small {
    margin-top: 3px;
    color: #788390;
}

.gang-operation-history__row time {
    color: #697481;
    font-size: 12px;
}

.gang-upgrade-card__top {
    display: flex;
    align-items: center;
    gap: 13px;
}

.gang-upgrade-card__top > span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border: 1px solid rgba(181,128,255,.22);
    border-radius: 15px;
    background: rgba(181,128,255,.07);
    font-size: 24px;
}

.gang-upgrade-card__top .gang-upgrade-icon {
    display: block;
    width: 39px;
    height: 39px;
    object-fit: contain;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .45));
}

.gang-upgrade-card__top small {
    color: #8f79ad;
    font-weight: 900;
    letter-spacing: .08em;
}

.gang-upgrade-levels {
    display: flex;
    gap: 6px;
    margin: 18px 0;
}

.gang-upgrade-levels span {
    flex: 1;
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.075);
}

.gang-upgrade-levels span.is-filled {
    background: linear-gradient(90deg, #8e55df, #d1a8ff);
    box-shadow: 0 0 10px rgba(181,128,255,.2);
}

.gang-upgrade-card dl {
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
}

.gang-upgrade-card dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.gang-upgrade-card dt {
    color: var(--gang-muted);
}

.gang-upgrade-card dd {
    margin: 0;
    font-weight: 800;
    text-align: right;
}

.gang-upgrade-card.is-maxed {
    position: relative;
    overflow: hidden;
    border-color: rgba(181,128,255,.25);
}

.gang-upgrade-card.is-maxed::after,
.gang-upgrade-row.is-maxed::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.09) 47%, rgba(var(--upgrade-accent,224,184,76),.2) 50%, rgba(255,255,255,.09) 53%, transparent 65%);
    background-size: 240% 240%;
    animation: gangUpgradeShine 6.5s ease-in-out infinite;
}

@keyframes gangUpgradeShine {
    0% { background-position: 130% 130%; }
    100% { background-position: -30% -30%; }
}

.gang-upgrade-card__icon,
.gang-upgrade-row__icon {
    position: relative;
}

.gang-upgrade-icon-halo {
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}

.gang-upgrade-card.is-maxed .gang-upgrade-icon-halo,
.gang-upgrade-row.is-maxed .gang-upgrade-icon-halo {
    opacity: 1;
    animation: gangUpgradeHalo 2.6s ease-in-out infinite;
}

@keyframes gangUpgradeHalo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--upgrade-accent,255,216,107),.35); }
    50% { box-shadow: 0 0 0 6px rgba(var(--upgrade-accent,255,216,107),0); }
}

.gang-btn.is-ready {
    animation: gangUpgradePulse 2.4s ease-in-out infinite;
}

@keyframes gangUpgradePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224,184,76,.45); }
    50% { box-shadow: 0 0 0 8px rgba(224,184,76,0); }
}

@media (prefers-reduced-motion: reduce) {
    .gang-upgrade-card.is-maxed::after,
    .gang-upgrade-row.is-maxed::after,
    .gang-upgrade-icon-halo,
    .gang-btn.is-ready {
        animation: none;
    }
}

.gang-upgrade-card.is-locked {
    border-color: rgba(210,73,85,.3);
}

.gang-upgrade-card__locked {
    margin: 10px 0 0;
    padding: 9px 12px;
    border: 1px solid rgba(210,73,85,.3);
    border-radius: 9px;
    background: rgba(150,45,50,.14);
    color: #ffb3b8;
    font-size: .68rem;
    line-height: 1.4;
}

.gang-chat-panel {
    padding-bottom: 18px !important;
}

.gang-chat-messages {
    height: 520px;
    overflow-y: auto;
    padding-right: 8px;
}

.gang-chat-message {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 11px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.gang-chat-message header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gang-chat-message header span {
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(224,184,76,.08);
    color: #dbc06f;
    font-size: 10px;
    font-weight: 800;
}

.gang-chat-message time {
    margin-left: auto;
    color: #68727f;
    font-size: 11px;
}

.gang-chat-message p {
    margin: 7px 0 0;
    color: #c5cbd2;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.gang-chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.gang-settings-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
}

.gang-settings-sidebar {
    display: grid;
    align-content: start;
    gap: 15px;
}

.gang-toggle-row {
    display: flex !important;
    align-items: flex-start;
    gap: 11px;
    padding: 14px;
    border: 1px solid var(--gang-line);
    border-radius: 13px;
    background: rgba(0,0,0,.17);
    cursor: pointer;
}

.gang-toggle-row input {
    width: 18px;
    min-height: 18px;
    margin-top: 2px;
    accent-color: var(--gang-gold);
}

.gang-toggle-row strong,
.gang-toggle-row small {
    display: block;
}

.gang-toggle-row small {
    margin-top: 4px;
    color: #7d8794;
}

.gang-danger-panel {
    border-color: rgba(255,98,111,.25);
    background: linear-gradient(145deg, rgba(54,20,26,.72), rgba(19,13,16,.98));
}

.gang-danger-panel--warning {
    border-color: rgba(255,175,86,.25);
    background: linear-gradient(145deg, rgba(57,39,20,.72), rgba(19,15,12,.98));
}

.gang-danger-panel h3 {
    margin: 6px 0;
}

.gang-danger-panel p {
    color: #b3a7a8;
    line-height: 1.55;
}

.gang-public-modal {
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--gang-accent) 30%, rgba(255,255,255,.1));
    border-radius: 16px;
}

.gang-public-modal__heading {
    justify-content: flex-start;
}

.gang-public-modal__heading strong,
.gang-public-modal__heading span {
    display: block;
}

.gang-public-modal__heading span {
    margin-top: 4px;
    color: var(--gang-muted);
}

.gang-public-modal > p {
    color: #b4bdc7;
    line-height: 1.55;
}

.gang-public-modal h4 {
    margin: 20px 0 10px;
}

.gang-public-member-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.gang-public-member-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--gang-line);
    border-radius: 11px;
    color: var(--gang-text);
    text-decoration: none;
    background: rgba(0,0,0,.17);
}

.gang-public-member-list strong,
.gang-public-member-list small {
    display: block;
}

.gang-public-member-list small {
    margin-top: 3px;
    color: #77818e;
}

/* =====================================================
   MODAL
===================================================== */

.gang-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.gang-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(8px);
}

.gang-modal__dialog {
    position: relative;
    width: min(620px, 100%);
    max-height: min(780px, calc(100vh - 40px));
    overflow-y: auto;
    padding: 30px;
    border: 1px solid rgba(224,184,76,.32);
    border-radius: 22px;
    background: linear-gradient(145deg, #1c2129, #0c0f14);
    box-shadow: 0 30px 90px rgba(0,0,0,.7);
    color: var(--gang-text);
    animation: gangModalIn .2s ease-out;
}

@keyframes gangModalIn {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.gang-modal__close {
    position: absolute;
    top: 14px;
    right: 15px;
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 11px;
    background: rgba(255,255,255,.04);
    color: #b8c0c9;
    cursor: pointer;
    font-size: 22px;
}

.gang-modal__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(224,184,76,.24);
    border-radius: 17px;
    background: rgba(224,184,76,.08);
    font-size: 28px;
}

.gang-modal h2 {
    margin: 16px 0 0;
    font-size: 28px;
}

.gang-modal__body {
    margin-top: 13px;
    color: #abb4bf;
    line-height: 1.6;
}

.gang-modal__body p {
    margin-top: 0;
}

.gang-modal-field {
    margin-top: 16px;
}

.gang-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

/* =====================================================
   TOASTS
===================================================== */

.gang-toast-region {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000002;
    display: grid;
    gap: 10px;
    width: min(390px, calc(100% - 40px));
}

.gang-toast {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(65,214,137,.3);
    border-radius: 14px;
    background: rgba(14,30,23,.96);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
    color: #dfffee;
    opacity: 0;
    transform: translateY(12px);
    transition: .22s;
}

.gang-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.gang-toast > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(65,214,137,.12);
    font-weight: 900;
}

.gang-toast p {
    margin: 0;
    line-height: 1.4;
}

.gang-toast--error {
    border-color: rgba(255,98,111,.32);
    background: rgba(42,17,21,.97);
    color: #ffe1e4;
}

.gang-toast--error > span {
    background: rgba(255,98,111,.12);
}

.gang-toast--warning {
    border-color: rgba(255,175,86,.32);
    background: rgba(45,30,15,.97);
    color: #ffe4c1;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1250px) {
    .gang-directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gang-dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gang-application-card {
        grid-template-columns: minmax(220px, .7fr) minmax(240px, 1fr) auto;
    }

    .gang-application-card blockquote {
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    .gang-outsider-grid,
    .gang-settings-grid {
        grid-template-columns: 1fr;
    }

    .gang-hq-layout {
        grid-template-columns: 1fr;
    }

    .gang-tab-nav {
        position: static;
        display: flex;
        overflow-x: auto;
        padding: 8px;
    }

    .gang-tab-button {
        flex: 0 0 auto;
    }

    .gang-tab-button.is-active::before {
        left: 12px;
        bottom: 2px;
        width: 24px;
        height: 3px;
    }

    .gang-operation-grid,
    .gang-upgrade-grid {
        grid-template-columns: 1fr;
    }

    .gang-operation-control__header {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .gang-operation-control__timer {
        grid-column: 1 / -1;
        text-align: left;
    }
}

@media (max-width: 760px) {
    .gang-page {
        width: min(100% - 18px, 1540px);
        margin-top: 12px;
    }

    .gang-page-hero {
        padding: 23px;
        border-radius: 19px;
    }

    .gang-page-hero__seal {
        display: none;
    }

    .gang-page-hero p {
        font-size: 15px;
    }

    .gang-directory-grid,
    .gang-dashboard-metrics,
    .gang-vault-history-grid,
    .gang-overview-grid,
    .gang-recruitment-grid,
    .gang-vault-grid {
        grid-template-columns: 1fr;
    }

    .gang-section-heading,
    .gang-tab-heading,
    .gang-panel__heading {
        align-items: stretch;
        flex-direction: column;
    }

    .gang-section-heading .gang-search-field,
    .gang-tab-heading .gang-search-field {
        width: 100%;
    }

    .gang-hq-banner {
        display: grid;
        padding: 22px;
    }

    .gang-hq-banner__identity {
        align-items: flex-start;
    }

    .gang-emblem--large {
        width: 62px;
        height: 62px;
        flex: 0 0 62px;
        border-radius: 18px;
        font-size: 18px;
    }

    .gang-hq-banner__rank {
        text-align: left;
    }

    .gang-announcement-strip {
        align-items: flex-start;
    }

    .gang-form-row,
    .gang-form--inline,
    .gang-chat-form {
        grid-template-columns: 1fr;
    }

    .gang-availability-grid,
    .gang-directory-card__metrics,
    .gang-operation-card__details {
        grid-template-columns: 1fr;
    }

    .gang-operation-spotlight__empty,
    .gang-operation-spotlight__active {
        align-items: flex-start;
        flex-direction: column;
    }

    .gang-operation-progress {
        flex-wrap: wrap;
    }

    .gang-operation-control__header {
        grid-template-columns: 1fr;
    }

    .gang-operation-control__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .gang-operation-history__row {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .gang-operation-history__row > div:nth-of-type(2),
    .gang-operation-history__row time {
        grid-column: 2;
    }

    .gang-activity-row {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .gang-activity-row time {
        grid-column: 2;
    }

    .gang-application-card {
        grid-template-columns: 1fr;
    }

    .gang-application-card blockquote {
        grid-column: auto;
    }

    .gang-public-member-list {
        grid-template-columns: 1fr;
    }

    .gang-modal__dialog {
        padding: 24px 19px 20px;
    }

    .gang-modal__actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }
}

@media (max-width: 480px) {
    .gang-hq-banner__identity {
        flex-direction: column;
    }

    .gang-dashboard-metrics .gang-metric-card {
        padding: 15px;
    }

    .gang-directory-card {
        min-height: 0;
    }

    .gang-directory-card__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .gang-operation-crew {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.gang-membership-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-top: 17px;
}

.gang-membership-actions h3 {
    margin: 6px 0 4px;
}

.gang-membership-actions p {
    max-width: 760px;
    margin: 0;
    color: var(--gang-muted);
    line-height: 1.55;
}

@media (max-width: 760px) {
    .gang-membership-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* =====================================
   MEMBER ATTACK ACTIVITY
===================================== */
.gang-attack-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.gang-attack-ledger{overflow:hidden}.gang-attack-table td{vertical-align:middle}.gang-attack-result{display:inline-flex;align-items:center;justify-content:center;min-width:84px;padding:6px 10px;border-radius:999px;font-size:.72rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.gang-attack-result--success{color:#b8ffd6;background:rgba(39,174,96,.14);border:1px solid rgba(39,174,96,.35)}.gang-attack-result--danger{color:#ffc7c7;background:rgba(192,57,43,.14);border:1px solid rgba(192,57,43,.35)}.gang-attack-result--neutral{color:#d8dce4;background:rgba(127,140,141,.13);border:1px solid rgba(127,140,141,.3)}
@media(max-width:1000px){.gang-attack-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.gang-attack-summary{grid-template-columns:1fr}.gang-attack-table{min-width:900px}}

.gang-accent--blackgold{--gang-accent:#f0ca69}.gang-accent--platinum{--gang-accent:#dce5ef}.gang-accent--champagne{--gang-accent:#efd59b}.gang-accent--bloodgold{--gang-accent:#d7a039}.gang-banner--blackcard{background-image:radial-gradient(circle at 80% 20%,rgba(240,202,105,.3),transparent 28%),linear-gradient(145deg,#050505,#1b1508)}.gang-banner--penthouse{background-image:radial-gradient(circle at 78% 22%,rgba(80,145,225,.24),transparent 28%),linear-gradient(145deg,#03060c,#13233b)}.gang-banner--gold-smoke{background-image:radial-gradient(circle at 20% 80%,rgba(245,200,85,.22),transparent 34%),linear-gradient(145deg,#0c0904,#2a210f)}.gang-banner--midnight-executive{background-image:linear-gradient(145deg,#02050c,#111c31 55%,#06070a)}.gang-card--black-card{box-shadow:0 0 0 1px rgba(245,210,118,.35),0 20px 60px rgba(0,0,0,.58)}.gang-card--penthouse{border-radius:34px}.gang-card--gold-vault{border-width:2px}.gang-emblem-style--kingpin-crown::before{content:"♛";position:absolute;top:-20px;color:#f0ca69}.gang-emblem-style--black-spade::before{content:"♠";font-size:1.7rem;color:#f0ca69}.gang-emblem-style--executive-seal{border-radius:8px;transform:rotate(-2deg)}.gang-emblem-style--diamond-vault{clip-path:polygon(50% 0,100% 30%,82% 100%,18% 100%,0 30%)}.gang-kingpin-customisation{border-color:rgba(240,202,105,.3)!important;background:linear-gradient(145deg,rgba(240,202,105,.08),rgba(0,0,0,.18))}.gang-kingpin-customisation.is-locked{opacity:.72}.gang-banner-upload{padding:12px;border:1px dashed rgba(240,202,105,.35);border-radius:12px}.gang-banner-upload input{width:100%}.gang-banner-upload small{color:var(--gang-muted)}.gang-hq-banner[style*="background-image"]{background-size:cover;background-position:center}.gang-hq-banner[style*="background-image"] .gang-hq-banner__shade{background:linear-gradient(90deg,rgba(0,0,0,.66),rgba(0,0,0,.12),rgba(0,0,0,.62))}


/* =====================================
   OUTSIDER GANG CARD ARTWORK
===================================== */

.gang-create-panel {
    overflow: hidden;
}

.gang-outsider-visual {
    position: relative;
    min-height: 110px;
    margin: -1px -1px 13px;
    overflow: hidden;
    border-bottom: 1px solid rgba(224, 184, 76, .22);
    background: #090c10;
}

.gang-outsider-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    filter: saturate(.55) contrast(1.08) brightness(.62);
    transform: scale(1.025);
}

.gang-outsider-visual__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 7, 10, .9), rgba(5, 7, 10, .22) 54%, rgba(5, 7, 10, .68)),
        linear-gradient(0deg, rgba(8, 10, 14, .96), transparent 62%);
}

.gang-outsider-visual__crest {
    position: absolute;
    left: 14px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gang-outsider-visual__crest > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(224, 184, 76, .55);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(224, 184, 76, .2), rgba(8, 10, 14, .92));
    box-shadow: 0 10px 24px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255, 255, 255, .04);
    color: #f3d77b;
    font-family: Georgia, serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .06em;
}

.gang-outsider-visual__crest small {
    max-width: 240px;
    color: #e9edf2;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.35;
    text-transform: uppercase;
    text-shadow: 0 2px 12px #000;
}

@media (max-width: 620px) {
    .gang-outsider-visual {
        min-height: 95px;
        margin-bottom: 11px;
    }

    .gang-outsider-visual__crest {
        left: 12px;
        bottom: 10px;
    }

    .gang-outsider-visual__crest > span {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 13px;
    }
}

/* =====================================================
   GANG ARMOURY
===================================================== */
.gang-tab-heading--armoury {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border: 1px solid rgba(224, 184, 76, .24);
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 10%, rgba(82, 170, 184, .13), transparent 34%),
        linear-gradient(145deg, rgba(224, 184, 76, .08), rgba(12, 15, 20, .94) 55%);
}
.gang-tab-heading--armoury::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -95px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(224, 184, 76, .11);
    border-radius: 50%;
    box-shadow: 0 0 0 32px rgba(224, 184, 76, .025), 0 0 0 68px rgba(82, 170, 184, .018);
    pointer-events: none;
}
.gang-armoury-metrics { margin-top: 18px; }
.gang-armoury-deposit-panel { margin-top: 18px; }
.gang-armoury-deposit-panel > p {
    margin: 0 0 16px;
    color: #939dab;
    line-height: 1.65;
}
.gang-armoury-deposit-form,
.gang-armoury-loan-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.gang-armoury-deposit-form select,
.gang-armoury-deposit-form input,
.gang-armoury-loan-control select {
    min-width: 0;
    min-height: 43px;
    padding: 0 12px;
    border: 1px solid #343b46;
    border-radius: 10px;
    color: #eef1f4;
    background: #101318;
    font: inherit;
}

.gang-active-operations {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}

.gang-active-operations > .gang-panel__heading {
    margin-bottom: 0;
}

.gang-active-operations .gang-operation-control {
    margin-bottom: 0;
}

.gang-operation-limit {
    display: grid;
    gap: 4px;
    margin-bottom: 18px;
    padding: 15px 17px;
    border: 1px solid rgba(224,184,76,.24);
    border-radius: 13px;
    background: rgba(224,184,76,.06);
}

.gang-operation-limit strong { color: #f0d680; }
.gang-operation-limit span { color: var(--gang-muted); font-size: 12px; }

.gang-role-choice label.is-locked { cursor: not-allowed; opacity: .48; }
.gang-role-choice label.is-locked > span { border-color: rgba(255, 98, 111, .16); }
.gang-armoury-deposit-form { grid-template-columns: minmax(0, 1fr) 92px auto; }
.gang-armoury-deposit-form input:disabled { opacity: .55; cursor: not-allowed; }
.gang-armoury-section { margin-top: 25px; }
.gang-section-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.gang-section-title h3 { margin: 3px 0 0; color: #f4f5f7; }
.gang-section-title > span {
    padding: 5px 9px;
    border: 1px solid rgba(224, 184, 76, .2);
    border-radius: 999px;
    color: #d7bd70;
    background: rgba(224, 184, 76, .055);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.gang-armoury-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.gang-armoury-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 17px;
    border: 1px solid #303640;
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.025), transparent 42%),
        #11151a;
    box-shadow: 0 16px 34px rgba(0,0,0,.18);
}
.gang-armoury-card--loaned {
    border-color: rgba(82, 170, 184, .35);
    background:
        linear-gradient(145deg, rgba(82, 170, 184, .08), transparent 45%),
        #10151a;
}
.gang-armoury-card > header {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}
.gang-armoury-card__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(224, 184, 76, .3);
    border-radius: 14px;
    background: #090c10;
    font-size: 27px;
}
.gang-armoury-card header span {
    display: block;
    color: #a58c4b;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.gang-armoury-card h3 {
    overflow: hidden;
    margin: 4px 0 0;
    color: #f3f4f6;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gang-armoury-status {
    padding: 5px 8px;
    border: 1px solid rgba(94, 194, 130, .3);
    border-radius: 999px;
    color: #9ee6b8;
    background: rgba(94, 194, 130, .07);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.gang-armoury-card--loaned .gang-armoury-status {
    border-color: rgba(82, 170, 184, .35);
    color: #9bdde7;
    background: rgba(82, 170, 184, .08);
}
.gang-armoury-card__stats {
    display: grid;
    gap: 7px;
    margin: 15px 0 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 11px;
    background: rgba(0,0,0,.19);
}
.gang-armoury-card__stats span { color: #aeb6c1; font-size: 11px; }
.gang-armoury-card__stats .condition-good { color: #8edaaa; }
.gang-armoury-card__stats .condition-worn { color: #e5c66c; }
.gang-armoury-card__stats .condition-critical { color: #ee8994; }
.gang-armoury-card__ownership {
    display: grid;
    gap: 5px;
    margin-bottom: 14px;
    color: #788390;
    font-size: 10px;
}
.gang-armoury-card__ownership strong { color: #d7dce2; }
.gang-armoury-card footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
}
.gang-armoury-loan-control { margin-top: auto; }
.gang-armoury-ledger { margin-top: 26px; }
.gang-armoury-log-list { display: grid; gap: 8px; }
.gang-armoury-log-list > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    background: rgba(0,0,0,.17);
}
.gang-armoury-log-list span { color: #cbd1d8; font-size: 11px; }
.gang-armoury-log-list small { flex: 0 0 auto; color: #6f7986; font-size: 9px; }

@media (max-width: 900px) {
    .gang-armoury-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .gang-armoury-deposit-form,
    .gang-armoury-loan-control { grid-template-columns: 1fr; }
    .gang-armoury-card > header { grid-template-columns: max-content minmax(0,1fr); }
    .gang-armoury-card__icon { width: 48px; height: 48px; }
    .gang-armoury-status { grid-column: 1 / -1; width: fit-content; }
    .gang-armoury-log-list > div { display: grid; gap: 5px; }
}


/* =====================================
   TERRITORY COMMAND
===================================== */
.gang-tab-heading--territories { align-items: center; }
.gang-territory-metrics { margin-bottom: 12px; }
.gang-territory-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 12px; align-items: start; }
.gang-territory-layout > .gang-panel { min-width: 0; padding: 13px; }
.gang-territory-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gang-territory-card { position: relative; overflow: hidden; padding: 16px; border: 1px solid color-mix(in srgb, var(--territory-colour) 42%, rgba(255,255,255,.07)); border-radius: 13px; background: linear-gradient(145deg, color-mix(in srgb, var(--territory-colour) 11%, #0a0d12), #090c10 65%); }
.gang-territory-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--territory-colour); box-shadow: 0 0 18px var(--territory-colour); }
.gang-territory-card header { display: flex; gap: 11px; align-items: center; }
.gang-territory-card header > span { display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid color-mix(in srgb, var(--territory-colour) 48%, transparent); border-radius: 11px; background: rgba(0,0,0,.24); font-size: 21px; }
.gang-territory-card small { color: #8a94a1; font-size: 8px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.gang-territory-card h4 { margin: 3px 0 0; color: #f0f2f5; font-size: 16px; }
.gang-territory-card p { min-height: 36px; margin: 13px 0; color: #89939f; font-size: 10px; line-height: 1.55; }
.gang-territory-card > div { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.gang-territory-card > div span { padding: 5px 7px; border: 1px solid rgba(255,255,255,.065); border-radius: 999px; color: #b8c0ca; background: rgba(0,0,0,.22); font-size: 9px; }
.gang-territory-card > strong { color: #d8bd69; font-size: 10px; }
.gang-territory-bonus-list { display: grid; gap: 8px; }
.gang-territory-bonus-list span { display: flex; justify-content: space-between; gap: 14px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.065); border-radius: 10px; color: #909aa6; background: rgba(0,0,0,.18); font-size: 10px; }
.gang-territory-bonus-list strong { color: #75d4df; }
.gang-territory-note { margin: 15px 0 0; color: #6f7a87; font-size: 9px; line-height: 1.55; }
.gang-territory-war-panel { margin-bottom: 20px; border-color: rgba(209,74,82,.28); background: linear-gradient(145deg, rgba(112,25,31,.12), rgba(8,11,15,.92)); }
.gang-territory-war-score { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin: 14px 0; padding: 14px; border: 1px solid rgba(255,255,255,.065); border-radius: 12px; background: rgba(0,0,0,.2); }
.gang-territory-war-score div:last-child { text-align: right; }
.gang-territory-war-score small { display: block; color: #727d89; font-size: 8px; letter-spacing: .12em; }
.gang-territory-war-score strong { color: #e5e8ec; font-size: 12px; }
.gang-territory-war-score b { color: #ef7580; font-size: 23px; }
.gang-territory-war-panel > p { color: #8e98a4; font-size: 10px; }
@media (max-width: 980px) { .gang-territory-layout { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .gang-territory-layout > .gang-panel { padding: 18px; } .gang-territory-card-grid { grid-template-columns: 1fr; } .gang-territory-war-score { grid-template-columns: 1fr; text-align: left; } .gang-territory-war-score div:last-child { text-align: left; } }

/* Dynamic Gang founding price */
.gang-creation-price {
    display: grid;
    gap: 6px;
    margin: 10px 0 13px;
    padding: 11px;
    border: 1px solid rgba(201, 154, 69, .3);
    border-radius: 12px;
    background: radial-gradient(circle at 100% 0%, rgba(201,154,69,.15), transparent 60%), linear-gradient(135deg, rgba(201, 154, 69, .1), rgba(255,255,255,.025));
    box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.gang-creation-price > div {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
}
.gang-creation-price small {
    color: var(--gang-muted, #9da8b5);
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .1em;
}
.gang-creation-price strong { color: #efc66f; font-size: 1.1rem; text-shadow: 0 0 14px rgba(239,198,111,.3); }
.gang-creation-price p { margin: 0; color: #b7c0ca; font-size: .72rem; line-height: 1.4; }
.gang-creation-price > span { color: #d0d7df; font-size: .68rem; font-weight: 750; }
.gang-creation-price[data-affordable="false"] {
    border-color: rgba(211, 82, 82, .35);
    background: linear-gradient(135deg, rgba(211, 82, 82, .09), rgba(255,255,255,.02));
}
.gang-creation-price[data-affordable="false"] strong { color: #ef8f8f; }

.gang-payout-choice{display:grid;gap:10px;margin-top:14px}.gang-payout-choice label{display:flex;gap:11px;align-items:flex-start;padding:13px;border:1px solid var(--ec-line);border-radius:12px;background:rgba(255,255,255,.025);cursor:pointer}.gang-payout-choice input{margin-top:4px}.gang-payout-choice span{display:grid;gap:3px}.gang-payout-choice small{color:var(--ec-muted)}

/* Gang Infamy wallet and Boss upgrade redemption */
.gang-vault-total small {
    display: block;
    margin-top: 4px;
    color: #7f8b96;
    font-size: 11px;
}

.gang-upgrade-reset-panel {
    margin-bottom: 18px;
    border-color: rgba(224, 184, 76, .22);
    background: linear-gradient(135deg, rgba(224, 184, 76, .07), rgba(17, 22, 29, .94));
}

.gang-upgrade-reset-panel .gang-panel__heading {
    align-items: center;
}

.gang-upgrade-reset-panel .gang-panel__heading > div {
    max-width: 760px;
}

.gang-upgrade-reset-panel .gang-table-note {
    margin: 10px 0 0;
}

/* Three-day member probation */
.gang-probation-strip { border-color: rgba(92,174,255,.28); background: linear-gradient(110deg,rgba(20,54,76,.72),rgba(12,18,25,.94)); }
.gang-probation-strip strong { color:#a8d7ff; }
.gang-icon-btn:disabled { opacity:.38; cursor:not-allowed; filter:grayscale(.7); }


.gang-probation-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 13px 15px;
    border: 1px solid rgba(224, 184, 76, .28);
    border-radius: 13px;
    color: #efe3bd;
    background: rgba(224, 184, 76, .07);
}
.gang-probation-notice span { color: var(--gang-muted, #9ca3ad); font-size: .82rem; }
@media (max-width: 620px) { .gang-probation-notice { align-items: flex-start; flex-direction: column; } }


/* Combat-stat artwork used by Gang training upgrades and territory bonuses */
.gang-upgrade-card__top > span > .combat-stat-icon { width:42px; height:42px; }
.gang-territory-bonus-list > span { align-items:center; }
.gang-territory-bonus-list .combat-stat-icon { margin-right:6px; }

.gang-inline-icon{width:22px;height:22px;object-fit:contain;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));}
.gang-metric-card__icon .gang-inline-icon{width:26px;height:26px;}


/* Shared image icons for Gang sections and probation states */
.gang-heading-with-icon{display:flex;align-items:center;gap:10px;}
.gang-heading-with-icon .gang-inline-icon{width:30px;height:30px;flex:0 0 30px;}
.gang-announcement-strip__icon .gang-inline-icon{width:34px;height:34px;}
.gang-operation-spotlight__empty>span .gang-inline-icon{width:48px;height:48px;}

/* V10 organised-crime roles and active preparation */
.gang-operation-rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0 0 18px}.gang-operation-rules>span{padding:12px 13px;border:1px solid rgba(224,184,76,.15);border-radius:11px;background:rgba(224,184,76,.045);color:#8e98a5;font-size:11px}.gang-operation-rules strong{display:block;margin-bottom:3px;color:#ead48d;font-size:13px}.gang-operation-card__roles{display:grid;gap:8px;margin:0 0 16px}.gang-operation-card__roles>span{color:#7e8996;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.gang-operation-card__roles>div{display:flex;flex-wrap:wrap;gap:6px}.gang-operation-card__roles small{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(0,0,0,.2);color:#aab3be;font-size:10px}.gang-operation-card__roles small.is-required{border-color:rgba(224,184,76,.22);color:#e2ca81}.gang-operation-card__roles b{font-size:13px}.gang-readiness-metrics{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}.gang-readiness-metrics>span{padding:9px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(0,0,0,.18)}.gang-readiness-metrics small,.gang-readiness-metrics strong{display:block}.gang-readiness-metrics small{color:#77828f;font-size:10px}.gang-readiness-metrics strong{margin-top:3px;font-size:13px}.gang-operation-role-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:17px}.gang-operation-role{padding:14px;border:1px solid rgba(255,255,255,.075);border-radius:13px;background:rgba(0,0,0,.15)}.gang-operation-role.is-required{border-color:rgba(255,175,86,.2)}.gang-operation-role.is-ready{border-color:rgba(65,214,137,.2);background:rgba(65,214,137,.035)}.gang-operation-role>header{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center}.gang-operation-role>header>span{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06);font-size:17px}.gang-operation-role header strong,.gang-operation-role header small{display:block}.gang-operation-role header small{margin-top:2px;color:#788390;font-size:10px}.gang-operation-role header>b{color:#b9c2cd;font-size:12px}.gang-operation-role>p{min-height:38px;margin:11px 0;color:#8d97a3;font-size:11px}.gang-operation-role__members{display:grid;gap:6px}.gang-operation-role__members>div{display:flex;align-items:center;gap:8px;min-height:42px;padding:7px;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:rgba(0,0,0,.18)}.gang-operation-role__members img{width:30px;height:30px;border-radius:8px;object-fit:cover}.gang-operation-role__members strong,.gang-operation-role__members small{display:block}.gang-operation-role__members small{margin-top:2px;color:#74808d;font-size:9px}.gang-operation-role__members .is-unavailable{opacity:.48;border-color:rgba(255,98,111,.18)}.gang-operation-role__members .is-open{justify-content:center;border-style:dashed;color:#66717e}.gang-operation-role__members .is-open>span{font-size:17px}.gang-operation-preparation{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;margin-top:18px;padding:16px;border:1px solid rgba(91,148,222,.22);border-radius:14px;background:linear-gradient(135deg,rgba(91,148,222,.07),rgba(0,0,0,.18))}.gang-operation-preparation h4{margin:4px 0;font-size:17px}.gang-operation-preparation p{font-size:12px}.gang-operation-preparation>div>small{color:#85a5ca;font-size:10px}.gang-operation-preparation__score{min-width:120px;text-align:center}.gang-operation-preparation__score strong,.gang-operation-preparation__score span,.gang-operation-preparation__score small{display:block}.gang-operation-preparation__score strong{color:#9ecbff;font-size:25px}.gang-operation-preparation__score span{font-size:10px;text-transform:uppercase}.gang-operation-preparation__score small{margin-top:3px;color:#73808f}.gang-role-choice{display:grid;gap:8px;margin-top:14px}.gang-role-choice label{display:block;cursor:pointer}.gang-role-choice input{position:absolute;opacity:0;pointer-events:none}.gang-role-choice label>span{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:9px;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.025)}.gang-role-choice label>span>b{grid-row:1/4;display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:rgba(224,184,76,.08);font-size:18px}.gang-role-choice strong,.gang-role-choice small,.gang-role-choice em{display:block}.gang-role-choice small{margin-top:2px;color:#8c97a4;font-size:10px}.gang-role-choice em{margin-top:5px;color:#6f7c89;font-size:10px;font-style:normal}.gang-role-choice input:checked+span{border-color:rgba(224,184,76,.45);background:rgba(224,184,76,.07);box-shadow:0 0 0 1px rgba(224,184,76,.1)}
@media(max-width:1050px){.gang-operation-rules{grid-template-columns:repeat(2,minmax(0,1fr))}.gang-readiness-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.gang-operation-preparation{grid-template-columns:1fr auto}.gang-operation-preparation>button{grid-column:1/-1}}
@media(max-width:720px){.gang-operation-rules,.gang-operation-role-board,.gang-readiness-metrics{grid-template-columns:1fr}.gang-operation-preparation{grid-template-columns:1fr}.gang-operation-preparation__score{text-align:left}.gang-operation-preparation>button{grid-column:auto}.gang-operation-role>p{min-height:0}}
.gang-probation-notice{display:flex;align-items:center;justify-content:flex-start;gap:12px;}
.gang-probation-notice__icon{display:grid;place-items:center;flex:0 0 38px;}
.gang-probation-notice__icon .gang-inline-icon{width:38px;height:38px;}
.gang-probation-notice>div{display:grid;gap:3px;}
.gang-modal__icon .gang-inline-icon{width:48px;height:48px;}
.gang-activity-row__icon .gang-inline-icon{width:24px;height:24px;}
@media (max-width:620px){
  .gang-heading-with-icon .gang-inline-icon{width:26px;height:26px;flex-basis:26px;}
  .gang-probation-notice{align-items:flex-start;flex-direction:row;}
}


/* Gang overview artwork is centred and clipped inside its metric tile. */
.gang-metric-card__icon {
    overflow: hidden;
    padding: 4px;
}
.gang-metric-card__icon .gang-inline-icon {
    width: 100% !important;
    height: 100% !important;
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
    object-position: center;
    transform: none;
}
.gang-battle-log-link {
    display: inline-grid;
    gap: 3px;
    color: #eef3f8;
    text-decoration: none;
}
.gang-battle-log-link span { color: var(--gang-gold-bright); font-size: 11px; font-weight: 800; }
.gang-battle-log-link:hover span { text-decoration: underline; }


/* Brighter VIP Black Card Gang presentation collection. */
.gang-accent--blackgold { --gang-accent:#ffd85f; }
.gang-accent--platinum { --gang-accent:#f2f8ff; }
.gang-accent--champagne { --gang-accent:#ffe19b; }
.gang-accent--bloodgold { --gang-accent:#ffb53f; }
.gang-banner--blackcard { background-image:radial-gradient(circle at 80% 18%,rgba(255,216,95,.58),transparent 30%),linear-gradient(145deg,#030303,#382807 60%,#090601); }
.gang-banner--penthouse { background-image:radial-gradient(circle at 78% 20%,rgba(100,181,255,.52),transparent 31%),linear-gradient(145deg,#020713,#17436e 60%,#06090f); }
.gang-banner--gold-smoke { background-image:radial-gradient(circle at 22% 78%,rgba(255,204,76,.5),transparent 36%),linear-gradient(145deg,#120c01,#553a08 62%,#0d0801); }
.gang-banner--midnight-executive { background-image:radial-gradient(circle at 82% 20%,rgba(91,161,255,.45),transparent 32%),linear-gradient(145deg,#020716,#183967 60%,#05070c); }
.gang-card--black-card { box-shadow:0 0 0 1px rgba(255,216,95,.62),0 0 34px rgba(255,197,48,.2),0 20px 60px rgba(0,0,0,.55); }
.gang-card--gold-vault { border-color:rgba(255,216,95,.7); box-shadow:0 0 26px rgba(255,199,58,.17); }
.gang-emblem-style--kingpin-crown::before,
.gang-emblem-style--black-spade::before { color:#ffd85f; filter:drop-shadow(0 0 9px rgba(255,216,95,.45)); }
.gang-kingpin-customisation { border-color:rgba(255,216,95,.62)!important; background:linear-gradient(145deg,rgba(255,216,95,.18),rgba(18,12,2,.38)); box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 25px rgba(255,190,35,.12); }


/* Spacious member combat ledger */
.gang-attack-table th,.gang-attack-table td{padding:15px 17px;white-space:nowrap}
.gang-attack-table th{letter-spacing:.055em}
.gang-attack-when time{display:block;min-width:150px;color:#d8dee8;line-height:1.45}
.gang-attack-report{min-width:126px}
.gang-battle-log-link{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 12px;border:1px solid rgba(228,190,105,.3);border-radius:9px;text-decoration:none}
.gang-battle-log-link:hover{border-color:rgba(228,190,105,.62);background:rgba(228,190,105,.08)}
@media(max-width:620px){.gang-attack-table{min-width:1080px}.gang-attack-table th,.gang-attack-table td{padding:13px 14px}}

.gang-application-combat{display:flex;flex-wrap:wrap;gap:7px;padding:10px;border:1px solid rgba(242,201,76,.25);border-radius:10px;background:rgba(242,201,76,.05)}.gang-application-combat strong{width:100%;color:#f2c94c;font-size:.75rem}.gang-application-combat span{padding:4px 7px;border-radius:7px;background:rgba(255,255,255,.045);font-size:.72rem}.gang-application-disclosure{margin-top:10px}

/* NPC underworld network */
.gang-npc-network{margin:14px 0}.gang-npc-network>.npc-spotlight-grid{padding:14px}.gang-npc-contact{background:rgba(255,255,255,.025)}.gang-npc-contact .npc-spotlight-card__button{border-color:rgba(198,155,73,.22);color:#ead28d}

/* Custom Gang role editor */
.gang-role-editor-panel{grid-column:1/-1}.gang-role-settings-form{display:grid;gap:14px;margin-top:16px}.gang-role-editor{padding:15px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025)}.gang-role-editor__heading{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:12px}.gang-role-editor__heading label{display:grid;gap:6px;flex:1}.gang-role-editor__heading label>span,.gang-role-editor__heading small{color:var(--gang-muted,#8e98a7);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.gang-role-editor__heading input{width:100%;padding:10px 12px;border:1px solid rgba(255,255,255,.11);border-radius:9px;background:#10141a;color:#fff}.gang-role-permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gang-role-permission{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid rgba(255,255,255,.065);border-radius:9px;background:rgba(0,0,0,.13);cursor:pointer}.gang-role-permission input{margin-top:3px}.gang-role-permission span{display:grid;gap:2px}.gang-role-permission strong{font-size:11px;color:#e8ebf0}.gang-role-permission small{font-size:9px;line-height:1.4;color:#7f8997}@media(max-width:760px){.gang-role-permission-grid{grid-template-columns:1fr}.gang-role-editor__heading{align-items:stretch;flex-direction:column}}

/* Role accent theming, matching the rank-badge palette used on the Members tab. */
.gang-role-accent--boss { --role-accent: 224,184,76; }
.gang-role-accent--underboss { --role-accent: 181,128,255; }
.gang-role-accent--captain { --role-accent: 98,168,255; }
.gang-role-accent--soldier { --role-accent: 65,214,137; }
.gang-role-accent--associate { --role-accent: 181,189,199; }

.gang-role-hierarchy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 16px 0;
    padding: 12px;
    border: 1px solid var(--gang-line);
    border-radius: 13px;
    background: rgba(255,255,255,.02);
}

.gang-role-hierarchy__step {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid rgba(var(--role-accent),.22);
    border-radius: 999px;
    background: rgba(var(--role-accent),.06);
    color: rgb(var(--role-accent));
    font-size: 11px;
    font-weight: 800;
}

.gang-role-hierarchy__step.is-current {
    border-color: rgba(var(--role-accent),.55);
    background: rgba(var(--role-accent),.14);
    box-shadow: 0 0 0 1px rgba(var(--role-accent),.25);
}

.gang-role-hierarchy__icon {
    font-size: 13px;
}

.gang-role-hierarchy__arrow {
    color: #565f6c;
    font-size: 14px;
}

.gang-role-editor,
.gang-role-readonly-card {
    position: relative;
    border-left: 3px solid rgba(var(--role-accent,255,255,255),.4) !important;
    transition: border-color .15s, box-shadow .15s;
}

.gang-role-editor:hover,
.gang-role-readonly-card:hover {
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
}

.gang-role-editor__badge,
.gang-role-readonly-card__badge {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    align-self: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(var(--role-accent),.3);
    border-radius: 10px;
    background: rgba(var(--role-accent),.1);
    font-size: 17px;
}

.gang-role-readonly-card header {
    align-items: center !important;
}

.gang-role-permission {
    position: relative;
}

.gang-role-permission__icon {
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
}

.gang-role-permission:has(input:checked) {
    border-color: rgba(var(--role-accent),.4);
    background: rgba(var(--role-accent),.08);
}

.gang-role-permission input {
    flex-shrink: 0;
    width: 17px;
    min-height: 17px;
    padding: 0;
    border-radius: 4px;
    accent-color: rgb(var(--role-accent, 224,184,76));
}

.gang-role-readonly-card > div span {
    border-color: rgba(var(--role-accent),.22) !important;
    color: rgb(var(--role-accent)) !important;
    background: rgba(var(--role-accent),.06) !important;
}

@media (max-width: 760px) {
    .gang-role-hierarchy {
        justify-content: flex-start;
    }
}

/* Compact upgrade / organised-crime cards and dedicated role management. */
.gang-operation-grid,.gang-upgrade-grid{gap:12px}
.gang-operation-card,.gang-upgrade-card{padding:16px;border-radius:15px}
.gang-operation-card__icon{width:46px;height:46px;margin-bottom:12px;border-radius:13px;font-size:22px}
.gang-operation-card h3,.gang-upgrade-card h3{font-size:19px}
.gang-operation-card>p,.gang-upgrade-card>p{font-size:11px;line-height:1.45}
.gang-operation-card__details{gap:7px;margin:12px 0}
.gang-operation-card__details>div{padding:8px 9px}
.gang-operation-card__details span{font-size:9px}
.gang-operation-card__roles{margin-bottom:11px}
.gang-upgrade-card__top>span{width:44px;height:44px;flex-basis:44px;border-radius:12px}
.gang-upgrade-card__top .gang-upgrade-icon{width:34px;height:34px}
.gang-upgrade-levels{margin:13px 0}
.gang-upgrade-card dl{gap:5px;margin-bottom:12px}
.gang-upgrade-card dl>div{padding:6px 0}
.gang-role-editor-panel--standalone{max-width:1120px}
.gang-role-readonly-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:16px}
.gang-role-readonly-card{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.025)}
.gang-role-readonly-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.gang-role-readonly-card header strong{font-size:14px}.gang-role-readonly-card header small{color:var(--gang-muted,#8e98a7);font-size:9px;text-transform:uppercase;letter-spacing:.07em}
.gang-role-readonly-card>div{display:flex;flex-wrap:wrap;gap:6px}.gang-role-readonly-card>div span{padding:5px 7px;border:1px solid rgba(224,184,76,.17);border-radius:999px;color:#d8c384;background:rgba(224,184,76,.04);font-size:9px;font-weight:800}
.gang-role-readonly-card p{margin:0;color:var(--gang-muted,#8e98a7);font-size:11px}

/* Headquarters command-deck presentation. */
.gang-headquarters{--hq-glow:color-mix(in srgb,var(--gang-accent) 28%,transparent);position:relative}
.gang-headquarters .gang-hq-banner{isolation:isolate;min-height:auto;padding:16px 18px;border-color:color-mix(in srgb,var(--gang-accent) 52%,rgba(255,255,255,.1));border-radius:16px;box-shadow:0 0 0 1px color-mix(in srgb,var(--gang-accent) 8%,transparent),0 18px 48px rgba(0,0,0,.5),0 0 26px color-mix(in srgb,var(--gang-accent) 8%,transparent)}
.gang-headquarters .gang-hq-banner::before{content:"";position:absolute;z-index:-1;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(90deg,#000,transparent 68%);pointer-events:none}
.gang-headquarters .gang-hq-banner::after{content:"";position:absolute;inset:auto 28px 0;height:2px;background:linear-gradient(90deg,transparent,var(--gang-accent),transparent);box-shadow:0 0 18px var(--hq-glow)}
.gang-headquarters .gang-hq-banner__shade{z-index:-1;background:radial-gradient(circle at 16% 35%,color-mix(in srgb,var(--gang-accent) 16%,transparent),transparent 30%),linear-gradient(100deg,rgba(2,4,7,.84),rgba(3,5,8,.34) 58%,rgba(2,4,7,.8))}
.gang-headquarters .gang-hq-banner[style*="background-image"] .gang-hq-banner__shade{background:radial-gradient(circle at 16% 35%,color-mix(in srgb,var(--gang-accent) 12%,transparent),transparent 30%),linear-gradient(100deg,rgba(2,4,7,.78),rgba(3,5,8,.2) 58%,rgba(2,4,7,.72))}
.gang-hq-banner__signal{position:absolute;z-index:1;right:32px;top:24px;display:flex;align-items:end;gap:4px;height:18px;opacity:.62}.gang-hq-banner__signal i{display:block;width:3px;border-radius:99px;background:var(--gang-accent);box-shadow:0 0 9px var(--hq-glow)}.gang-hq-banner__signal i:nth-child(1){height:6px}.gang-hq-banner__signal i:nth-child(2){height:11px}.gang-hq-banner__signal i:nth-child(3){height:17px}
.gang-headquarters .gang-hq-banner__identity{gap:14px;min-width:0}.gang-headquarters .gang-emblem--large{width:56px;height:56px;flex:0 0 56px;border-width:2px;border-radius:16px;background:linear-gradient(145deg,rgba(3,5,8,.9),color-mix(in srgb,var(--gang-accent) 12%,rgba(3,5,8,.92)));box-shadow:inset 0 1px rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.48),0 0 18px var(--hq-glow);font-size:18px;text-shadow:0 0 18px var(--hq-glow)}
.gang-hq-banner__copy{min-width:0}.gang-headquarters .gang-hq-banner h2{margin:3px 0 3px;font-size:clamp(19px,2.4vw,28px);text-shadow:0 8px 28px rgba(0,0,0,.7)}.gang-headquarters .gang-hq-banner p{overflow:hidden;max-width:700px;color:#d4d9df;font-size:11.5px;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 9px #000}
.gang-hq-banner__meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}.gang-hq-banner__meta>span{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:0 7px;border:1px solid rgba(255,255,255,.12);border-radius:7px;color:#adb6c1;background:rgba(3,5,8,.54);font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;backdrop-filter:blur(9px)}.gang-hq-banner__meta strong{color:#fff}.gang-hq-banner__meta .is-online{color:#a4eec5}.gang-hq-banner__meta .is-online i,.gang-hq-banner__rank small i{width:6px;height:6px;border-radius:50%;background:var(--gang-green);box-shadow:0 0 9px rgba(65,214,137,.7)}
.gang-headquarters .gang-hq-banner__rank{min-width:150px;padding:10px 12px;border-color:color-mix(in srgb,var(--gang-accent) 28%,rgba(255,255,255,.12));border-radius:13px;background:linear-gradient(145deg,rgba(2,4,7,.76),rgba(9,12,17,.58));box-shadow:inset 0 1px rgba(255,255,255,.08),0 10px 22px rgba(0,0,0,.32);backdrop-filter:blur(12px)}.gang-headquarters .gang-hq-banner__rank>span{color:#8995a3;font-size:9px;font-weight:900}.gang-headquarters .gang-hq-banner__rank>strong{margin-top:5px;font-size:16px}.gang-hq-banner__rank small{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:6px;color:#99a5b1;font-size:9px;font-weight:750}
.gang-headquarters .gang-dashboard-metrics{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:9px}.gang-hq-metric{--metric-accent:var(--gang-accent);position:relative;isolation:isolate;min-height:64px;padding:10px 12px;overflow:hidden;border-color:color-mix(in srgb,var(--metric-accent) 23%,var(--gang-line));background:linear-gradient(145deg,color-mix(in srgb,var(--metric-accent) 7%,rgba(21,26,34,.98)),rgba(9,12,17,.98));box-shadow:0 10px 26px rgba(0,0,0,.24);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.gang-hq-metric::before{content:"";position:absolute;z-index:-1;left:0;top:10px;bottom:10px;width:2px;border-radius:99px;background:var(--metric-accent);box-shadow:0 0 15px color-mix(in srgb,var(--metric-accent) 48%,transparent)}.gang-hq-metric::after{content:"";position:absolute;z-index:-1;right:-28px;top:-34px;width:110px;height:110px;border-radius:50%;background:color-mix(in srgb,var(--metric-accent) 7%,transparent);filter:blur(4px)}.gang-hq-metric:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--metric-accent) 45%,var(--gang-line));box-shadow:0 14px 32px rgba(0,0,0,.32)}
.gang-hq-metric--members{--metric-accent:#4ed68d}.gang-hq-metric--infamy{--metric-accent:#f0c75e}.gang-hq-metric--vault{--metric-accent:#68adff}.gang-hq-metric--operations{--metric-accent:#b985ff}.gang-hq-metric .gang-metric-card__icon{border-color:color-mix(in srgb,var(--metric-accent) 32%,transparent);background:color-mix(in srgb,var(--metric-accent) 9%,transparent)}.gang-hq-metric__copy{flex:1;min-width:0}.gang-hq-metric__progress{height:3px;margin-top:6px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.07)}.gang-hq-metric__progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--metric-accent) 70%,#fff),var(--metric-accent));box-shadow:0 0 11px color-mix(in srgb,var(--metric-accent) 48%,transparent)}
.gang-headquarters .gang-hq-layout{grid-template-columns:190px minmax(0,1fr);gap:12px;margin-top:12px}.gang-headquarters .gang-tab-nav{gap:4px;padding:8px;border-color:color-mix(in srgb,var(--gang-accent) 14%,var(--gang-line));background:linear-gradient(180deg,rgba(17,21,28,.97),rgba(10,13,18,.97));box-shadow:0 18px 48px rgba(0,0,0,.34)}.gang-tab-nav__heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 4px 5px;padding:3px 5px 7px;border-bottom:1px solid rgba(255,255,255,.07)}.gang-tab-nav__heading small{color:var(--gang-accent);font-size:8px;font-weight:950;letter-spacing:.13em}.gang-tab-nav__heading span{color:#6f7a87;font-size:9px}.gang-headquarters .gang-tab-button{min-height:38px}.gang-headquarters .gang-tab-button:hover,.gang-headquarters .gang-tab-button.is-active{border-color:color-mix(in srgb,var(--gang-accent) 28%,transparent);color:color-mix(in srgb,var(--gang-accent) 72%,#fff);background:linear-gradient(90deg,color-mix(in srgb,var(--gang-accent) 11%,transparent),color-mix(in srgb,var(--gang-accent) 3%,transparent))}.gang-headquarters .gang-tab-button.is-active::before{background:var(--gang-accent);box-shadow:0 0 13px var(--hq-glow)}
.gang-headquarters .gang-tab-content{padding:3px 1px}
.gang-overview-panel{overflow:hidden;background:linear-gradient(145deg,rgba(26,31,40,.97),rgba(11,14,19,.99))}.gang-overview-panel::after{content:"";position:absolute;right:-45px;top:-55px;width:145px;height:145px;border-radius:50%;background:color-mix(in srgb,var(--panel-accent,var(--gang-accent)) 6%,transparent)}.gang-overview-panel--availability{--panel-accent:#4ed68d}.gang-overview-panel--record{--panel-accent:var(--gang-accent)}.gang-overview-panel__icon{display:grid;place-items:center;width:43px;height:43px;flex:0 0 43px;border:1px solid color-mix(in srgb,var(--panel-accent) 30%,transparent);border-radius:12px;color:var(--panel-accent);background:color-mix(in srgb,var(--panel-accent) 8%,transparent);font-size:18px}.gang-overview-panel__icon img{width:34px;height:34px;object-fit:contain}.gang-overview-panel .gang-panel__heading{justify-content:flex-start}.gang-overview-panel .gang-availability-item{border-color:color-mix(in srgb,var(--panel-accent) 12%,var(--gang-line));transition:border-color .16s ease,background .16s ease}.gang-overview-panel .gang-availability-item:hover{border-color:color-mix(in srgb,var(--panel-accent) 30%,var(--gang-line));background:color-mix(in srgb,var(--panel-accent) 4%,rgba(0,0,0,.19))}.gang-overview-panel .gang-detail-list>div{padding:10px 11px;border:1px solid rgba(255,255,255,.065);border-radius:9px;background:rgba(0,0,0,.13)}.gang-overview-panel .gang-detail-list{gap:6px}.gang-overview-panel .gang-detail-list>div:last-child{border-bottom:1px solid rgba(255,255,255,.065)}
@media(max-width:980px){.gang-headquarters .gang-hq-layout{grid-template-columns:1fr}.gang-tab-nav__heading{display:none}.gang-headquarters .gang-tab-nav{display:flex}.gang-headquarters .gang-tab-button{min-height:48px}}
@media(max-width:760px){.gang-headquarters .gang-hq-banner{gap:19px;padding:24px}.gang-headquarters .gang-hq-banner__identity{align-items:center;gap:16px}.gang-headquarters .gang-emblem--large{width:72px;height:72px;flex-basis:72px;border-radius:20px;font-size:21px}.gang-headquarters .gang-hq-banner h2{font-size:34px}.gang-headquarters .gang-hq-banner p{white-space:normal}.gang-hq-banner__meta{margin-top:12px}.gang-headquarters .gang-hq-banner__rank{width:100%;min-width:0;text-align:left}.gang-hq-banner__rank small{justify-content:flex-start}.gang-headquarters .gang-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.gang-hq-metric{min-height:106px;padding:14px}.gang-overview-panel .gang-panel__heading{align-items:center;flex-direction:row}}
@media(max-width:520px){.gang-headquarters .gang-hq-banner__identity{align-items:flex-start}.gang-headquarters .gang-emblem--large{width:62px;height:62px;flex-basis:62px;border-radius:17px;font-size:17px}.gang-headquarters .gang-hq-banner h2{font-size:29px}.gang-hq-banner__meta>span{font-size:8px}.gang-headquarters .gang-dashboard-metrics{grid-template-columns:1fr}.gang-headquarters .gang-tab-button__icon{width:30px;height:30px;flex-basis:30px}.gang-overview-panel .gang-panel__heading{align-items:flex-start}.gang-overview-panel__icon{width:38px;height:38px;flex-basis:38px}}
.gang-territory-member-lock{margin-bottom:13px;border-color:rgba(224,184,76,.2)}
.gang-territory-bonus-list>span{display:flex;align-items:center;gap:10px}
.gang-territory-bonus-label{display:flex!important;align-items:center;gap:7px;min-width:0;padding:0!important;border:0!important;background:none!important}
.gang-territory-bonus-label em{min-width:0;color:#aab3be;font-style:normal;overflow-wrap:anywhere}
.gang-territory-bonus-list>span>strong{margin-left:auto;white-space:nowrap;color:#e9cf79}

/* Organised-crime operations centre. */
.gang-operations-page{--operations-gold:#efc85c;--operations-blue:#72b7ff;--operations-green:#5fe0a0;display:grid;gap:18px}
.gang-operations-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:16px;min-height:auto;padding:16px 18px;overflow:hidden;border:1px solid rgba(239,200,92,.28);border-radius:15px;background:radial-gradient(circle at 82% 12%,rgba(239,200,92,.13),transparent 26%),linear-gradient(135deg,rgba(23,28,36,.99),rgba(8,11,16,.99));box-shadow:0 24px 58px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.035)}
.gang-operations-hero::before{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(90deg,#000,transparent 82%)}
.gang-operations-hero::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--operations-gold),transparent);box-shadow:0 0 16px rgba(239,200,92,.38)}
.gang-operations-hero__copy{position:relative;z-index:2;align-self:center;max-width:720px}
.gang-operations-hero__copy h2{margin:4px 0 4px;font-size:clamp(18px,2.4vw,25px);letter-spacing:-.03em}.gang-operations-hero__copy .gang-heading-with-icon .gang-inline-icon{width:26px;height:26px;flex-basis:26px}.gang-operations-hero__copy>p{max-width:680px;margin:0;color:#aeb7c3;font-size:11.5px;line-height:1.4}
.gang-operations-hero__status{display:flex;align-items:center;gap:6px;margin-top:10px;color:#8f9aa7;font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.gang-operations-hero__status i,.gang-operation-control__statusline .is-live i,.gang-active-operations .gang-count-badge i{width:7px;height:7px;border-radius:50%;background:var(--operations-green);box-shadow:0 0 12px rgba(95,224,160,.8);animation:gang-operations-pulse 1.8s ease-in-out infinite}
.gang-operations-hero__metrics{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-self:end;border:1px solid rgba(255,255,255,.085);border-radius:12px;background:rgba(5,8,12,.68);box-shadow:0 16px 34px rgba(0,0,0,.28);backdrop-filter:blur(8px)}
.gang-operations-hero__metrics>div{min-width:0;padding:10px;border-right:1px solid rgba(255,255,255,.07)}.gang-operations-hero__metrics>div:last-child{border-right:0}.gang-operations-hero__metrics span,.gang-operations-hero__metrics strong,.gang-operations-hero__metrics small{display:block}.gang-operations-hero__metrics span{color:#7f8b98;font-size:8.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.gang-operations-hero__metrics strong{margin:4px 0 1px;color:#f5d77c;font-size:18px}.gang-operations-hero__metrics small{overflow:hidden;color:#6f7a87;font-size:8.5px;text-overflow:ellipsis;white-space:nowrap}
.gang-operations-hero__radar{position:absolute;z-index:0;right:-65px;top:-100px;width:340px;height:340px;border:1px solid rgba(239,200,92,.055);border-radius:50%;opacity:.7}.gang-operations-hero__radar>i{position:absolute;inset:16%;border:1px solid rgba(239,200,92,.07);border-radius:50%}.gang-operations-hero__radar>i:nth-child(2){inset:32%}.gang-operations-hero__radar>i:nth-child(3){inset:47%}.gang-operations-hero__radar>span{position:absolute;left:50%;top:50%;width:46%;height:1px;transform-origin:left;background:linear-gradient(90deg,rgba(239,200,92,.34),transparent);animation:gang-operations-sweep 8s linear infinite}
@keyframes gang-operations-pulse{50%{opacity:.35;transform:scale(.8)}}@keyframes gang-operations-sweep{to{transform:rotate(360deg)}}

.gang-operations-page .gang-operation-rules{gap:7px;margin:0}.gang-operations-page .gang-operation-rules>span{display:flex;align-items:center;gap:8px;min-height:46px;padding:8px 10px;border-color:rgba(114,183,255,.13);background:linear-gradient(145deg,rgba(114,183,255,.045),rgba(9,12,17,.8))}.gang-operations-page .gang-operation-rules>span>i{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border:1px solid rgba(114,183,255,.17);border-radius:8px;color:#7fbfff;background:rgba(114,183,255,.06);font-size:8px;font-style:normal;font-weight:900}.gang-operations-page .gang-operation-rules strong{color:#e8edf3;font-size:11px}.gang-operations-page .gang-operation-rules>span>span{color:#798491;font-size:9px;line-height:1.35}
.gang-active-operations,.gang-operation-catalogue{display:grid;gap:9px}.gang-operations-page .gang-panel__heading{margin:0;padding:4px 2px}.gang-operations-page .gang-panel__heading h3{margin:3px 0 0;font-size:15px}.gang-operations-page .gang-panel__heading p{margin:3px 0 0;color:#788492;font-size:10px}.gang-operations-page .gang-count-badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 8px;border-color:rgba(114,183,255,.18);color:#9ccaff;background:rgba(114,183,255,.055)}

.gang-operations-page .gang-operation-grid{gap:8px;margin:0}.gang-operations-page .gang-operation-card{--operation-tone:var(--operations-gold);position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:210px;padding:10px;overflow:hidden;border-color:color-mix(in srgb,var(--operation-tone) 20%,var(--gang-line));background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--operation-tone) 9%,transparent),transparent 35%),radial-gradient(circle at 0% 100%,color-mix(in srgb,var(--operation-tone) 5%,transparent),transparent 40%),linear-gradient(145deg,rgba(22,27,35,.98),rgba(9,12,17,.99));box-shadow:0 16px 38px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.03);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.gang-operations-page .gang-operation-card--tone-1{--operation-tone:#71b6ff}.gang-operations-page .gang-operation-card--tone-2{--operation-tone:#b28aff}.gang-operations-page .gang-operation-card::before{content:"";position:absolute;z-index:-1;left:0;top:10px;bottom:10px;width:2px;border-radius:99px;background:var(--operation-tone);box-shadow:0 0 15px color-mix(in srgb,var(--operation-tone) 55%,transparent)}.gang-operations-page .gang-operation-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--operation-tone) 40%,var(--gang-line));box-shadow:0 22px 50px rgba(0,0,0,.34)}
.gang-operation-card__header{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center}.gang-operations-page .gang-operation-card__icon{width:34px;height:34px;margin:0;border-color:color-mix(in srgb,var(--operation-tone) 28%,transparent);border-radius:10px;background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--operation-tone) 20%,transparent),transparent 70%),color-mix(in srgb,var(--operation-tone) 8%,transparent);box-shadow:inset 0 1px rgba(255,255,255,.06);font-size:15px}.gang-operation-card__header h3{margin:2px 0 0!important;font-size:13.5px!important;line-height:1.1}.gang-operation-card__crew{align-self:start;padding:3px 6px;border:1px solid rgba(255,255,255,.08);border-radius:7px;color:#8e99a5;background:rgba(0,0,0,.22);font-size:8px;font-weight:900;letter-spacing:.06em;white-space:nowrap}.gang-operations-page .gang-operation-card>p{min-height:28px;margin:7px 0 0;color:#929daa;font-size:9.5px;line-height:1.4}
.gang-operations-page .gang-operation-card__details{gap:6px;margin:9px 0}.gang-operations-page .gang-operation-card__details>div{position:relative;padding:7px 8px;overflow:hidden;border-color:rgba(255,255,255,.065);background:linear-gradient(160deg,rgba(255,255,255,.03),transparent),rgba(3,5,8,.3);box-shadow:inset 0 1px rgba(255,255,255,.03)}.gang-operations-page .gang-operation-card__details>div::after{content:"";position:absolute;right:-12px;bottom:-17px;width:42px;height:42px;border-radius:50%;background:color-mix(in srgb,var(--operation-tone) 6%,transparent)}.gang-operations-page .gang-operation-card__details span{font-size:8.5px}.gang-operations-page .gang-operation-card__details strong{color:#e7ecf2;font-size:11px}.gang-operations-page .gang-operation-card__roles{flex:1;margin:0 0 9px}.gang-operations-page .gang-operation-card__roles small{border-color:rgba(255,255,255,.07);background:linear-gradient(160deg,rgba(255,255,255,.025),transparent),rgba(0,0,0,.19)}.gang-operations-page .gang-operation-card__roles small.is-required{border-color:color-mix(in srgb,var(--operation-tone) 30%,transparent);color:color-mix(in srgb,var(--operation-tone) 60%,#fff);background:linear-gradient(160deg,color-mix(in srgb,var(--operation-tone) 12%,transparent),transparent),rgba(0,0,0,.19);box-shadow:0 0 10px color-mix(in srgb,var(--operation-tone) 15%,transparent)}
.gang-operation-card__footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.065)}.gang-operation-card__footer>span{display:flex;align-items:center;gap:5px;color:#788491;font-size:8.5px;font-weight:750;white-space:nowrap}.gang-operation-card__footer>span i{width:6px;height:6px;border-radius:50%;background:var(--operation-tone);box-shadow:0 0 9px color-mix(in srgb,var(--operation-tone) 60%,transparent)}.gang-operation-card__footer .gang-btn{min-width:120px;min-height:32px;font-size:11px}

.gang-operations-page .gang-operation-control{position:relative;isolation:isolate;padding:0;overflow:hidden;border-color:rgba(114,183,255,.2);border-radius:20px;background:radial-gradient(circle at 96% 0,rgba(114,183,255,.08),transparent 30%),linear-gradient(145deg,rgba(22,27,35,.99),rgba(8,11,16,.99));box-shadow:0 20px 48px rgba(0,0,0,.3)}.gang-operations-page .gang-operation-control.is-execution-ready{border-color:rgba(95,224,160,.25);background:radial-gradient(circle at 96% 0,rgba(95,224,160,.08),transparent 30%),linear-gradient(145deg,rgba(22,27,35,.99),rgba(8,11,16,.99))}.gang-operation-control__statusline{display:flex;align-items:center;gap:8px;padding:10px 18px;border-bottom:1px solid rgba(255,255,255,.065);background:rgba(3,5,8,.3)}.gang-operation-control__statusline>span{display:inline-flex;align-items:center;gap:6px;padding-right:9px;border-right:1px solid rgba(255,255,255,.075);color:#74808d;font-size:8px;font-weight:900;letter-spacing:.09em}.gang-operation-control__statusline>span:last-child{margin-left:auto;padding-right:0;border-right:0;color:#9db7d2}.gang-operation-control__statusline .is-live{color:#8fdfb6}
.gang-operations-page .gang-operation-control__header{grid-template-columns:42px minmax(0,1fr) auto;gap:11px;padding:13px 13px 10px}.gang-operations-page .gang-operation-control__icon{width:42px;height:42px;border-color:rgba(114,183,255,.25);background:linear-gradient(145deg,rgba(114,183,255,.12),rgba(114,183,255,.035));box-shadow:inset 0 1px rgba(255,255,255,.08),0 10px 25px rgba(0,0,0,.2)}.gang-operations-page .gang-operation-control h3{margin:3px 0 2px;font-size:17px}.gang-operations-page .gang-operation-control__header p{max-width:700px;font-size:10px}.gang-operation-payout{display:block;margin-top:5px;color:#84a8cf;font-size:8.5px;font-weight:750}.gang-operations-page .gang-operation-control__timer{min-width:130px;border-color:rgba(114,183,255,.2);background:linear-gradient(145deg,rgba(114,183,255,.085),rgba(5,8,12,.32))}.gang-operations-page .gang-operation-control__timer span{color:#81a9d2}.gang-operations-page .gang-operation-control__timer span i{display:inline-block;width:6px;height:6px;margin-right:2px;border-radius:50%;background:#75b9ff;box-shadow:0 0 9px rgba(117,185,255,.6)}.gang-operations-page .gang-operation-control__timer strong{color:#c9e4ff}
.gang-operation-phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 13px;padding:8px 9px;border:1px solid rgba(255,255,255,.065);border-radius:11px;background:rgba(2,4,7,.3)}.gang-operation-phases>span{position:relative;display:flex;align-items:center;gap:6px;color:#64707d;font-size:8.5px;font-weight:800}.gang-operation-phases>span::after{content:"";position:absolute;left:28px;right:8px;top:50%;height:1px;background:rgba(255,255,255,.08)}.gang-operation-phases i{position:relative;z-index:1;display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:#11161d;font-size:8px;font-style:normal}.gang-operation-phases b{position:relative;z-index:1;padding-right:6px;background:#0c1015}.gang-operation-phases .is-complete{color:#76dca8}.gang-operation-phases .is-complete i{border-color:rgba(95,224,160,.32);color:#9ceac2;background:rgba(95,224,160,.1)}.gang-operation-phases .is-current{color:#8fc5fa}.gang-operation-phases .is-current i{border-color:rgba(114,183,255,.38);color:#bae0ff;background:rgba(114,183,255,.12);box-shadow:0 0 12px rgba(114,183,255,.15)}
.gang-operations-page .gang-operation-readiness{margin:10px 13px 0;border-color:rgba(114,183,255,.17);background:linear-gradient(145deg,rgba(114,183,255,.055),rgba(0,0,0,.17))}.gang-operations-page .gang-operation-readiness>div:first-child>span{font-size:11px;font-weight:800}.gang-operations-page .gang-operation-readiness>div:first-child small{display:block;margin-bottom:2px;color:#7799bd;font-size:8px;letter-spacing:.1em}.gang-operations-page .gang-operation-readiness>div:first-child strong{font-size:16px}.gang-operations-page .gang-readiness-bar{height:5px}.gang-operations-page .gang-readiness-metrics>span{padding:7px;border-color:rgba(255,255,255,.06);background:rgba(2,4,7,.23)}
.gang-operations-page .gang-operation-role-board{gap:7px;margin:9px 13px 0}.gang-operations-page .gang-operation-role{border-color:rgba(255,255,255,.07);background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(0,0,0,.13))}.gang-operations-page .gang-operation-role.is-ready{border-color:rgba(95,224,160,.18);background:linear-gradient(145deg,rgba(95,224,160,.045),rgba(0,0,0,.13))}.gang-operations-page .gang-operation-role>header>span{border:1px solid rgba(255,255,255,.075)}.gang-operations-page .gang-operation-role__members>div{background:rgba(2,4,7,.24)}
.gang-operations-page .gang-operation-preparation{margin:9px 13px 0;border-color:rgba(114,183,255,.18);background:linear-gradient(135deg,rgba(114,183,255,.065),rgba(0,0,0,.16))}.gang-operations-page .gang-operation-control__actions{margin:0;padding:10px 13px 12px}.gang-operations-page .gang-joined-chip{margin-right:auto}.gang-operation-history-panel{padding:12px 13px;border-radius:14px;background:linear-gradient(145deg,rgba(21,26,34,.97),rgba(9,12,17,.98))}.gang-operations-page .gang-operation-history{margin-top:4px}.gang-operations-page .gang-operation-history__row{padding:8px 6px;border-bottom-color:rgba(255,255,255,.055)}.gang-operations-page .gang-operation-history__row:last-child{border-bottom:0}
.gang-operations-page .gang-operation-limit{margin:0;border-color:rgba(255,175,86,.2);border-radius:15px;background:linear-gradient(145deg,rgba(255,175,86,.07),rgba(8,11,16,.9))}

@media(max-width:1080px){.gang-operations-hero{grid-template-columns:1fr;padding:27px}.gang-operations-hero__copy{max-width:760px}.gang-operations-hero__metrics{max-width:620px}.gang-operation-card__footer{align-items:stretch;flex-direction:column}.gang-operation-card__footer .gang-btn{width:100%}}
@media(max-width:760px){.gang-operations-page{gap:15px}.gang-operations-hero{min-height:0;padding:22px 18px;border-radius:18px}.gang-operations-hero__copy h2{font-size:31px}.gang-operations-hero__copy .gang-heading-with-icon .gang-inline-icon{width:36px;height:36px;flex-basis:36px}.gang-operations-hero__metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.gang-operations-hero__metrics>div{padding:13px 10px}.gang-operations-hero__metrics strong{font-size:20px}.gang-operations-hero__metrics small{display:none}.gang-operations-page .gang-panel__heading{align-items:flex-start}.gang-operations-page .gang-operation-grid{grid-template-columns:1fr}.gang-operations-page .gang-operation-card{min-height:0}.gang-operation-card__header{grid-template-columns:46px minmax(0,1fr)}.gang-operations-page .gang-operation-card__icon{width:46px;height:46px}.gang-operation-card__crew{grid-column:1/-1;justify-self:start}.gang-operations-page .gang-operation-control__header{grid-template-columns:52px minmax(0,1fr);padding:17px 15px 13px}.gang-operations-page .gang-operation-control__icon{width:52px;height:52px}.gang-operations-page .gang-operation-control__timer{grid-column:1/-1;width:100%;min-width:0;text-align:left}.gang-operation-phases{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 15px}.gang-operation-phases>span::after{display:none}.gang-operations-page .gang-operation-readiness,.gang-operations-page .gang-operation-role-board,.gang-operations-page .gang-operation-preparation{margin-left:15px;margin-right:15px}.gang-operations-page .gang-operation-control__actions{align-items:stretch;flex-direction:column;padding:13px 15px 16px}.gang-operations-page .gang-operation-control__actions .gang-btn{width:100%}.gang-operations-page .gang-joined-chip{margin:0;text-align:center}.gang-operation-history-panel{padding:15px}.gang-operation-control__statusline>span:nth-child(2){display:none}}
@media(max-width:480px){.gang-operations-hero__metrics{grid-template-columns:1fr}.gang-operations-hero__metrics>div{display:flex;align-items:center;justify-content:space-between;gap:12px;border-right:0;border-bottom:1px solid rgba(255,255,255,.065)}.gang-operations-hero__metrics>div:last-child{border-bottom:0}.gang-operations-hero__metrics strong{margin:0}.gang-operations-page .gang-operation-card__details{grid-template-columns:1fr 1fr}.gang-operation-control__statusline{padding:9px 13px}.gang-operation-control__statusline>span:last-child{font-size:7px}.gang-operation-phases{grid-template-columns:1fr}.gang-operation-phases b{background:transparent}}
@media(prefers-reduced-motion:reduce){.gang-operations-hero__status i,.gang-operation-control__statusline .is-live i,.gang-active-operations .gang-count-badge i,.gang-operations-hero__radar>span{animation:none}}

/* Preserve a complete outline around the clipped Diamond Vault emblem. */
.gang-headquarters .gang-emblem-style--diamond-vault{isolation:isolate;overflow:hidden;border:0;background:var(--gang-accent);box-shadow:none;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45)) drop-shadow(0 0 11px var(--hq-glow))}
.gang-headquarters .gang-emblem-style--diamond-vault::after{content:"";position:absolute;z-index:-1;inset:2px;clip-path:inherit;background:linear-gradient(145deg,rgba(3,5,8,.96),color-mix(in srgb,var(--gang-accent) 12%,rgba(3,5,8,.96)))}
@media(max-width:760px){.gang-role-readonly-grid{grid-template-columns:1fr}}
.gang-city-map-card{position:relative;display:block;overflow:hidden;min-height:140px;margin:0 0 10px;border:1px solid rgba(224,184,76,.28);border-radius:14px;background:#0b1016;box-shadow:0 12px 30px rgba(0,0,0,.3),0 0 20px rgba(224,184,76,.06)}
.gang-city-map-card img{display:block;width:100%;height:clamp(140px,18vw,220px);object-fit:cover;object-position:center;opacity:.78;transition:transform .35s ease,opacity .35s ease}
.gang-city-map-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,7,10,.96),rgba(4,7,10,.28) 60%,rgba(4,7,10,.08));pointer-events:none}
.gang-city-map-card>span{position:absolute;z-index:1;left:clamp(14px,3vw,24px);bottom:clamp(12px,2.5vw,18px);display:grid;gap:3px;max-width:440px;color:#f5f7fa}
.gang-city-map-card small{color:#e0b84c;font-size:.6rem;font-weight:900;letter-spacing:.13em}
.gang-city-map-card strong{font-size:clamp(.95rem,1.7vw,1.3rem);line-height:1.15}
.gang-city-map-card em{color:#d8c98f;font-size:.72rem;font-style:normal;font-weight:800}
.gang-city-map-card:hover img{transform:scale(1.025);opacity:.9}
@media(max-width:620px){.gang-city-map-card{min-height:120px}.gang-city-map-card img{height:160px}.gang-city-map-card:after{background:linear-gradient(0deg,rgba(4,7,10,.96),rgba(4,7,10,.18) 75%)}.gang-city-map-card>span{right:14px}}

/* Gang development control centre */
.gang-upgrade-overview {
    position: relative;
    overflow: hidden;
    margin-bottom: 9px;
    padding: clamp(13px, 2.2vw, 20px);
    border: 1px solid rgba(224,184,76,.3);
    border-radius: 15px;
    background: radial-gradient(circle at 88% 12%,rgba(224,184,76,.17),transparent 34%),linear-gradient(145deg,rgba(28,31,39,.98),rgba(8,11,16,.99));
    box-shadow: 0 20px 55px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.035);
}
.gang-upgrade-overview::after {
    content: "";
    position: absolute;
    top: -95px;
    right: -70px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(224,184,76,.08);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(224,184,76,.025),0 0 0 68px rgba(224,184,76,.018);
    pointer-events: none;
}
.gang-upgrade-overview__copy { position: relative; z-index: 1; max-width: 760px; }
.gang-upgrade-overview__copy h2 { margin: 4px 0 4px; font-size: clamp(17px,2.2vw,22px); line-height: 1.1; }
.gang-upgrade-overview__copy p { max-width: 700px; margin: 0; color: #9aa5b1; font-size: 11.5px; line-height: 1.4; }
.gang-upgrade-wallet {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 7px;
    margin-top: 12px;
}
.gang-upgrade-wallet article { min-width: 0; padding: 9px 10px; border: 1px solid rgba(255,255,255,.075); border-radius: 11px; background: rgba(0,0,0,.2); }
.gang-upgrade-wallet article.is-primary { border-color: rgba(224,184,76,.35); background: rgba(224,184,76,.075); }
.gang-upgrade-wallet small,.gang-upgrade-wallet strong,.gang-upgrade-wallet span { display: block; }
.gang-upgrade-wallet small { overflow: hidden; color: #707c89; font-size: 8.5px; font-weight: 900; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.gang-upgrade-wallet article.is-primary small { color: #c9ad5e; }
.gang-upgrade-wallet strong { margin: 4px 0 1px; color: #f3f5f8; font-size: clamp(14px,1.8vw,18px); }
.gang-upgrade-wallet article.is-primary strong { color: #f2cb58; }
.gang-upgrade-wallet span { color: #788491; font-size: 9px; }

.gang-upgrade-redemption {
    display: grid;
    grid-template-columns: 36px minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px;
    background: linear-gradient(120deg,rgba(255,255,255,.035),rgba(0,0,0,.12));
}
.gang-upgrade-redemption__icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(224,184,76,.2); border-radius: 10px; background: rgba(224,184,76,.06); }
.gang-upgrade-redemption__icon img { width: 26px; height: 26px; object-fit: contain; }
.gang-upgrade-redemption h3 { margin: 2px 0; font-size: 13px; }
.gang-upgrade-redemption p { margin: 0; color: #818d9a; font-size: 9.5px; line-height: 1.4; }
.gang-upgrade-redemption__action { display: grid; justify-items: end; gap: 5px; }
.gang-upgrade-redemption__action small { color: #6f7b87; font-size: 9px; }

.gang-upgrade-sections { display: grid; gap: 16px; }
.gang-upgrade-section { --upgrade-accent: 181,128,255; }
.gang-upgrade-section--foundations { --upgrade-accent: 224,184,76; }
.gang-upgrade-section--development { --upgrade-accent: 75,171,224; }
.gang-upgrade-section--operations { --upgrade-accent: 211,82,82; }
.gang-upgrade-section--support { --upgrade-accent: 67,198,139; }
.gang-upgrade-section__header { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 0 2px 8px; border-bottom: 1px solid rgba(var(--upgrade-accent),.19); }
.gang-upgrade-section__header h3 { margin: 3px 0 2px; font-size: 15px; }
.gang-upgrade-section__header p { margin: 0; color: #808b98; font-size: 11px; }
.gang-upgrade-section__header > span { flex: 0 0 auto; padding: 6px 9px; border: 1px solid rgba(var(--upgrade-accent),.2); border-radius: 999px; color: rgba(var(--upgrade-accent),.9); background: rgba(var(--upgrade-accent),.055); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.gang-upgrade-section .gang-kicker { color: rgb(var(--upgrade-accent)); }
.gang-upgrade-section .gang-upgrade-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0; }

.gang-upgrade-section .gang-upgrade-card {
    --upgrade-card-accent: var(--upgrade-accent);
    display: flex;
    min-width: 0;
    min-height: 230px;
    flex-direction: column;
    padding: 12px;
    border: 1px solid rgba(var(--upgrade-card-accent),.17);
    border-radius: 13px;
    background: linear-gradient(150deg,rgba(var(--upgrade-card-accent),.055),rgba(13,17,23,.98) 45%);
    box-shadow: 0 12px 34px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.025);
}
.gang-upgrade-section .gang-upgrade-card.is-maxed { border-color: rgba(67,198,139,.32); }
.gang-upgrade-card__header { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 9px; align-items: center; }
.gang-upgrade-card__icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(var(--upgrade-card-accent),.25); border-radius: 11px; background: rgba(var(--upgrade-card-accent),.08); }
.gang-upgrade-card__icon .gang-upgrade-icon { display: block; width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.gang-upgrade-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gang-upgrade-card__meta span { padding: 3px 6px; border-radius: 999px; color: rgb(var(--upgrade-card-accent)); background: rgba(var(--upgrade-card-accent),.09); font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.gang-upgrade-card__meta b { color: #778391; font-size: 9px; letter-spacing: .04em; }
.gang-upgrade-card__header h3 { margin: 3px 0 0; overflow: hidden; color: #f0f2f5; font-size: 13.5px; line-height: 1.15; text-overflow: ellipsis; }
.gang-upgrade-card__description { min-height: 34px; margin: 13px 0 10px; color: #8994a0; font-size: 10px; line-height: 1.5; }
.gang-upgrade-progress { padding: 10px 11px; border: 1px solid rgba(255,255,255,.055); border-radius: 11px; background: rgba(0,0,0,.16); }
.gang-upgrade-progress > div:first-child { display: flex; justify-content: space-between; gap: 10px; color: #737f8c; font-size: 9px; }
.gang-upgrade-progress > div:first-child strong { color: rgb(var(--upgrade-card-accent)); }
.gang-upgrade-progress .gang-upgrade-levels { gap: 4px; margin: 8px 0 0; }
.gang-upgrade-progress .gang-upgrade-levels span { height: 5px; background: rgba(255,255,255,.075); }
.gang-upgrade-progress .gang-upgrade-levels span.is-filled { background: linear-gradient(90deg,rgba(var(--upgrade-card-accent),.64),rgb(var(--upgrade-card-accent))); box-shadow: 0 0 8px rgba(var(--upgrade-card-accent),.18); }
.gang-upgrade-effects { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 8px 0 14px; }
.gang-upgrade-effects > div { min-width: 0; padding: 9px 10px; border: 1px solid rgba(255,255,255,.055); border-radius: 10px; background: rgba(255,255,255,.018); }
.gang-upgrade-effects small,.gang-upgrade-effects strong { display: block; }
.gang-upgrade-effects small { margin-bottom: 4px; color: #687481; font-size: 8px; font-weight: 900; letter-spacing: .07em; }
.gang-upgrade-effects strong { overflow-wrap: anywhere; color: #cbd1d8; font-size: 10px; line-height: 1.35; }
.gang-upgrade-effects > div:last-child strong,.gang-upgrade-effects .is-complete strong { color: rgb(var(--upgrade-card-accent)); }
.gang-upgrade-card__footer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: end; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.gang-upgrade-price small,.gang-upgrade-price strong { display: block; }
.gang-upgrade-price small { color: #66727f; font-size: 8px; font-weight: 900; letter-spacing: .07em; }
.gang-upgrade-price strong { margin-top: 4px; color: #f0d47d; font-size: 13px; }
.gang-upgrade-card__footer .gang-btn { min-width: 142px; min-height: 38px; padding: 8px 11px; font-size: 10px; }

@media(max-width:980px) {
    .gang-upgrade-wallet { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .gang-upgrade-section .gang-upgrade-grid { grid-template-columns: 1fr; }
    .gang-upgrade-section .gang-upgrade-card { min-height: 0; }
}
@media(max-width:650px) {
    .gang-upgrade-overview { padding: 20px 16px; border-radius: 17px; }
    .gang-upgrade-wallet { grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 18px; }
    .gang-upgrade-wallet article { padding: 11px; }
    .gang-upgrade-wallet small { font-size: 7px; }
    .gang-upgrade-redemption { grid-template-columns: 40px minmax(0,1fr); align-items: start; padding: 13px; }
    .gang-upgrade-redemption__icon { width: 40px; height: 40px; }
    .gang-upgrade-redemption__action { grid-column: 1/-1; justify-items: stretch; }
    .gang-upgrade-redemption__action small { text-align: left; }
    .gang-upgrade-section__header { align-items: flex-start; flex-direction: column; gap: 9px; }
    .gang-upgrade-section__header h3 { font-size: 19px; }
    .gang-upgrade-section .gang-upgrade-card { padding: 14px; }
    .gang-upgrade-card__header { grid-template-columns: 44px minmax(0,1fr); }
    .gang-upgrade-card__icon { width: 44px; height: 44px; }
    .gang-upgrade-card__icon .gang-upgrade-icon { width: 34px; height: 34px; }
    .gang-upgrade-card__meta { align-items: flex-start; flex-direction: column; gap: 4px; }
    .gang-upgrade-card__description { min-height: 0; }
    .gang-upgrade-effects { grid-template-columns: 1fr; }
    .gang-upgrade-card__footer { grid-template-columns: 1fr; align-items: stretch; }
    .gang-upgrade-card__footer .gang-btn { width: 100%; }
}