/*
  Settings - Page styles
  Tokens from /static/css/common.css
*/

/* ── LAYOUT ── */

.stg-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-page-bg);
    color: var(--color-text);
}

.stg-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* ── SIDEBAR NAV ── */

.stg-nav {
    width: 240px;
    flex-shrink: 0;
    padding: 24px 12px;
    border-right: 1px solid var(--color-border-lt);
    background: var(--color-surface);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.stg-nav__group {
    margin-bottom: 6px;
}

.stg-nav__group + .stg-nav__group {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border-lt);
}

.stg-nav__group-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    padding: 0 12px;
    margin: 0 0 4px;
}

.stg-nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-sec);
    text-decoration: none;
    transition: all var(--transition);
}

.stg-nav__link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.6;
}

.stg-nav__link:hover {
    background: var(--color-border-lt);
    color: var(--color-text);
}

.stg-nav__link.active {
    background: var(--color-primary-alpha-08);
    color: var(--color-primary);
    font-weight: 600;
    border-left: 3px solid var(--color-primary);
    padding-left: 9px;
}

.stg-nav__link.active svg { opacity: 1; }

.stg-nav__link--danger { color: var(--color-error); }
.stg-nav__link--danger:hover { background: var(--color-danger-alpha-06); color: var(--color-error); }
.stg-nav__link--danger svg { color: var(--color-error); }

/* Two-column field row */
.stg-field-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 600px) {
    .stg-field-row-2 { grid-template-columns: 1fr; }
}

/* Mobile: horizontal tabs */
@media (max-width: 767px) {
    .stg-body { flex-direction: column; }
    .stg-nav {
        flex-direction: row;
        width: 100%;
        gap: 0;
        padding: 0 12px;
        border-right: none;
        border-bottom: 1px solid var(--color-border-lt);
        overflow-x: auto;
        overflow-y: visible;
    }
    .stg-nav__link {
        white-space: nowrap;
        padding: 12px 10px;
        border-radius: 0;
        border-bottom: 2px solid transparent;
        font-size: 0.8rem;
    }
    .stg-nav__link svg { display: none; }
    .stg-nav__link.active {
        background: transparent;
        border-bottom-color: var(--color-primary);
    }
}

/* ── SCROLL AREA ── */

.stg-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

.stg-content {
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
}

/* ── SECTIONS ── */

.stg-section {
    display: none;
    animation: stgFadeIn 0.25s ease;
}

.stg-section.active {
    display: block;
}

.stg-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

.stg-section__title {
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    color: var(--color-text);
}

.stg-section__desc {
    font-size: 0.875rem;
    color: var(--color-text-sec);
    margin: 0;
    line-height: 1.5;
}

/* ── CARDS ── */

.stg-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
}

.stg-card__row {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border-lt);
}

.stg-card__row:last-child {
    border-bottom: none;
}

.stg-card__row--avatar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
}

.stg-card__footer {
    padding: 16px 24px;
    background: var(--color-page-bg);
    display: flex;
    justify-content: flex-end;
}

/* ── AVATAR ── */

.stg-avatar__img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inv);
    font-size: 1.25rem;
    font-weight: 500;
    flex-shrink: 0;
}

.stg-avatar__name {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.stg-avatar__role {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* ── FORM FIELDS ── */

.stg-field {
    display: flex;
    flex-direction: column;
}

.stg-field__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}

.stg-field__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}

.stg-field__value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.stg-field__input {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.9375rem;
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-page-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.stg-field__input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
}

.stg-field__input::placeholder {
    color: var(--color-text-muted);
}

.stg-field__input--textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
}

.stg-field__input--select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

/* Input group (prefix like @) */
.stg-field__input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.stg-field__input-group:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
}
.stg-field__prefix {
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    user-select: none;
}
.stg-field__input--prefixed {
    border: none;
    border-radius: 0;
}
.stg-field__input--prefixed:focus {
    box-shadow: none;
}
.stg-field__hint {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.stg-field__static {
    padding: 10px 14px;
    font-size: 0.9375rem;
    background: var(--color-page-bg);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-weight: 500;
}

/* ── BUTTONS ──
   Base styles live in common.css via .stg-btn aliases. */

/* ── NOTIFICATION TOGGLES ── */

.stg-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--color-border-lt);
}

.stg-toggle-row:last-child {
    border-bottom: none;
}

.stg-toggle-row__title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
}

.stg-toggle-row__desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.stg-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    background: var(--color-border);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.2s;
    padding: 0;
}

.stg-toggle[aria-checked="true"] {
    background: var(--color-primary);
}

.stg-toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.2s;
    pointer-events: none;
}

.stg-toggle[aria-checked="true"] .stg-toggle__knob {
    transform: translateX(20px);
}

/* ── INVITE BANNER ── */

.stg-invite-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.stg-invite-banner__label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
}

.stg-invite-banner__hint {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.stg-invite-banner__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stg-invite-banner__code {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    background: var(--color-primary-alpha-06);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
}

/* ── MEMBER TABLE ── */

.stg-card--table {
    padding: 0;
}

.stg-table__head {
    display: none;
}

@media (min-width: 640px) {
    .stg-table__head {
        display: grid;
        grid-template-columns: 1fr 140px 48px;
        gap: 12px;
        padding: 10px 24px;
        border-bottom: 1px solid var(--color-border-lt);
    }
    .stg-table__col {
        font-size: 0.6875rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-text-muted);
    }
}

.stg-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--color-border-lt);
    transition: background 0.15s;
}

.stg-member:last-child {
    border-bottom: none;
}

.stg-member:hover {
    background: var(--color-page-bg);
}

@media (min-width: 640px) {
    .stg-member {
        display: grid;
        grid-template-columns: 1fr 140px 48px;
        gap: 12px;
    }
}

.stg-member__user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.stg-member__avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 500;
    flex-shrink: 0;
}

.stg-member__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stg-member__email {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stg-member__role-select {
    padding: 5px 28px 5px 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--color-text-sec);
    background: var(--color-page-bg);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-sm);
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    cursor: pointer;
    transition: border-color 0.2s;
}

.stg-member__role-select:focus {
    border-color: var(--color-primary);
}

.stg-member__role-select:disabled {
    opacity: 0.6;
    cursor: default;
}

.stg-member__remove {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.stg-member__remove:hover {
    background: var(--color-danger-alpha-08);
    color: var(--color-error);
}

.stg-member__remove:disabled {
    opacity: 0;
    pointer-events: none;
}

.stg-member__remove svg {
    width: 18px;
    height: 18px;
}

/* ── RANGE SLIDER ── */

.stg-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    outline: none;
    margin: 8px 0;
}

.stg-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 3px solid var(--color-surface);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.stg-range::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 4px var(--color-primary-alpha-12), 0 1px 4px rgba(0,0,0,0.15);
}

.stg-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 3px solid var(--color-surface);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer;
}

.stg-range__labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

/* ── MODALS ── */

.stg-overlay {
    z-index: 1000;
}

.stg-modal {
    padding: 28px;
    width: 420px;
    max-width: 90vw;
    transform: translateY(12px) scale(0.97);
    transition: transform 0.25s var(--ease-out);
}

.stg-overlay.active .stg-modal {
    transform: translateY(0) scale(1);
}

.stg-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.stg-modal__title {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
    color: var(--color-text);
}

.stg-modal__title--danger {
    color: var(--color-error);
}

.stg-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.stg-modal__close:hover {
    background: var(--color-border-lt);
    color: var(--color-text);
}

.stg-modal__body {
    font-size: 0.9375rem;
    color: var(--color-text-sec);
    line-height: 1.6;
    margin: 0 0 24px;
}

.stg-modal__body strong {
    color: var(--color-text);
}

.stg-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── TOAST ── */

.stg-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-inv);
    z-index: 9999;
    box-shadow: var(--shadow-lg);
    animation: stgSlideUp 0.3s var(--ease-out);
}

.stg-toast--success { background: var(--color-accent-dark); }
.stg-toast--error   { background: var(--color-error); }

/* ── ANIMATION ── */

@keyframes stgFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes stgSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── NEW SECTION STYLES ── */

/* Card subtitle */
.stg-card__subtitle {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    padding: 16px 24px 0;
    margin-bottom: 0;
}

/* Stg field padding inside card */
.stg-card .stg-field {
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border-lt);
}

.stg-card .stg-field:last-of-type { border-bottom: none; }
.stg-card .stg-card__footer { border-top: 1px solid var(--color-border-lt); }

/* Card list (subteam cards) */
.stg-card--list {
    padding: 0;
}

/* Empty state */
.stg-empty-state {
    padding: 32px 24px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ── SUBTEAM CARDS ── */

.stg-subteam-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border-lt);
    transition: background var(--transition);
}

.stg-subteam-card:last-child { border-bottom: none; }
.stg-subteam-card:hover { background: var(--color-page-bg); }

.stg-subteam-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-inv);
    flex-shrink: 0;
}

.stg-subteam-card__info {
    flex: 1;
    min-width: 0;
}

.stg-subteam-card__name {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.stg-subteam-card__meta {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.stg-subteam-card__manage {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

.stg-subteam-card__manage:hover { background: var(--color-primary-alpha-06); }

.stg-subteam-card__delete {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.stg-subteam-card__delete:hover {
    background: var(--color-danger-alpha-08);
    color: var(--color-error);
}

.stg-subteam-card__delete svg { width: 17px; height: 17px; }

/* ── ROLE CARDS ── */

.stg-role-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .stg-role-cards { grid-template-columns: 1fr; }
}

.stg-role-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    border-left: 4px solid var(--color-border);
}

.stg-role-card--owner  { border-left-color: var(--color-group-green); }
.stg-role-card--admin  { border-left-color: var(--color-doc-docx); }
.stg-role-card--member { border-left-color: var(--color-primary); }

.stg-role-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.stg-role-card__title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
}

.stg-role-card__desc {
    font-size: 0.82rem;
    color: var(--color-text-sec);
    margin: 0 0 14px;
    line-height: 1.5;
}

.stg-role-card__perms {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stg-role-card__perms li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--color-text-sec);
}

.stg-role-badge {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

.stg-role-badge--owner  { background: var(--color-role-owner-bg); color: var(--color-role-owner); }
.stg-role-badge--admin  { background: var(--color-role-admin-bg); color: var(--color-role-admin); }
.stg-role-badge--member { background: var(--color-primary-alpha-08); color: var(--color-primary); }

.stg-perm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stg-perm-dot--yes { background: var(--color-group-green); }
.stg-perm-dot--no  { background: rgba(91,97,110,0.3); }

/* ── DANGER ZONE ── */

.stg-section__title--danger { color: var(--color-error); }

.stg-card--danger-zone {
    border: 1.5px solid var(--color-danger-alpha-20);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
    padding: 0;
    margin-bottom: 20px;
}

.stg-danger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    border-bottom: 1px solid var(--color-danger-alpha-10);
}

.stg-danger-row--last {
    border-bottom: none;
}

.stg-danger-row__info { flex: 1; }

.stg-danger-row__title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 4px;
}

.stg-danger-row__desc {
    font-size: 0.84rem;
    color: var(--color-text-sec);
    margin: 0;
    line-height: 1.5;
}

.stg-danger-row__warning {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--color-warning);
    margin-top: 6px;
}

.stg-btn--outline-danger {
    background: transparent;
    color: var(--color-error);
    border: 1.5px solid var(--color-error);
}

.stg-btn--outline-danger:hover {
    background: var(--color-danger-alpha-06);
}

.stg-btn--gray {
    background: var(--color-neutral-200);
    color: var(--color-neutral-500);
    cursor: not-allowed;
}

.stg-btn--gray:not(:disabled):hover { background: rgba(91,97,110,0.3); }

/* ── PLACEHOLDER CARD ── */

.stg-card--placeholder {
    padding: 40px 24px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* ── COLOR PICKER ── */

.stg-color-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.stg-color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
    outline: none;
}

.stg-color-swatch:hover { transform: scale(1.15); }

.stg-color-swatch.active {
    box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor;
}

/* Override modal display (use display:flex instead of .active class) */
.stg-overlay[style*="display:flex"],
.stg-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.stg-overlay {
    align-items: center;
    justify-content: center;
}

/* ── MANAGE MEMBERS MODAL ── */

.stg-modal--wide {
    width: 580px;
    max-width: 95vw;
}

.stg-modal__subtitle {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 2px 0 0;
}

.stg-members-table {
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 20px 0 0;
}

.stg-members-table__head {
    display: grid;
    grid-template-columns: 1fr 110px 120px 48px;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-page-bg);
    border-bottom: 1px solid var(--color-border-lt);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.stg-members-table__row {
    display: grid;
    grid-template-columns: 1fr 110px 120px 48px;
    gap: 8px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-lt);
    transition: background 0.15s;
}

.stg-members-table__row:last-child {
    border-bottom: none;
}

.stg-members-table__row:hover {
    background: var(--color-page-bg);
}

.stg-members-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.stg-member__role-cell {
    display: flex;
    align-items: center;
}

.stg-member__access {
    font-size: 0.8125rem;
    color: var(--color-primary);
    font-weight: 500;
}

.stg-member__actions {
    display: flex;
    justify-content: flex-end;
}

.stg-modal__actions--between {
    justify-content: space-between;
    margin-top: 16px;
}

.stg-add-member-panel {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 0 0;
    border-top: 1px solid var(--color-border-lt);
    margin-top: 8px;
}

.stg-add-member-panel .stg-field__input--select {
    flex: 1;
    margin: 0;
}

/* ── INTEGRATION CARDS ── */

.stg-integration-card {
    padding: 0;
    margin-bottom: 16px;
}

.stg-integration-card__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
}

.stg-integration-card--unavailable .stg-integration-card__header {
    opacity: 0.6;
}

.stg-integration-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stg-integration-card__icon--drive    { background: var(--color-gdrive-light); color: var(--color-gdrive); }
.stg-integration-card__icon--github   { background: var(--color-github-light); color: var(--color-github); }
.stg-integration-card__icon--notion   { background: var(--color-notion-light); color: var(--color-notion); }
.stg-integration-card__icon--jira     { background: var(--color-jira-light); color: var(--color-jira); }
.stg-integration-card__icon--whatsapp { background: var(--color-whatsapp-light); color: var(--color-whatsapp); }

.stg-integration-card__info {
    flex: 1;
    min-width: 0;
}

.stg-integration-card__name {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--color-text);
}

.stg-integration-card__desc {
    font-size: 0.8125rem;
    color: var(--color-text-sec);
    margin: 0;
    line-height: 1.4;
}

.stg-integration-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.stg-integration-badge--connected,
.stg-integration-badge--active {
    background: var(--color-success-alpha-10);
    color: var(--color-success-dark);
}

.stg-integration-badge--soon {
    background: var(--color-border-lt);
    color: var(--color-text-muted);
}

.stg-integration-card__body {
    padding: 0 24px 20px;
    border-top: 1px solid var(--color-border-lt);
}

.stg-integration-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-lt);
    margin-bottom: 16px;
}

.stg-integration-stat__label {
    font-size: 0.8125rem;
    color: var(--color-text-sec);
}

.stg-integration-stat__value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
}

.stg-integration-card__actions {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.stg-integration-card__hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ── MODAL HINT & STATUS ── */

.stg-modal__hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 4px 0 12px;
    line-height: 1.5;
}

.stg-modal__status {
    font-size: 0.8125rem;
    min-height: 20px;
    margin: 0 0 8px;
}

.stg-modal__status--loading { color: var(--color-primary); }
.stg-modal__status--error   { color: var(--color-error); }

/* ── Delete project confirmation modal ── */
.stg-modal--danger-confirm {
    width: 460px;
    max-width: 92vw;
}

.stg-modal__body--danger {
    margin-bottom: 16px;
}

.stg-modal__body--danger code {
    background: var(--color-danger-alpha-10);
    color: var(--color-error);
    border: 1px solid var(--color-danger-alpha-25);
    border-radius: 6px;
    padding: 2px 6px;
    font-weight: 700;
}

.stg-modal__actions--danger-confirm {
    margin-top: 18px;
}


/* ═══════════════════════════════════════
   MEMBER MANAGEMENT & INVITE CODE STYLES
   ═══════════════════════════════════════ */

/* Members card header row */
.stg-members-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 12px;
    gap: 12px;
}
.stg-card__subdesc {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Small button variant */
.stg-btn--sm {
    padding: 5px 12px;
    font-size: 0.8rem;
    gap: 5px;
}

/* Inline invite panel */
.stg-inline-invite {
    margin: 0 24px 8px;
    padding: 12px 16px;
    background: var(--color-page-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-lt);
}
.stg-inline-invite__row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.stg-inline-invite__row .stg-field__input {
    flex: 1;
    min-width: 160px;
}
.stg-inline-invite__hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 8px;
    margin-bottom: 0;
}

/* Project member list rows */
.stg-member-list {
    padding: 0 24px 8px;
}
.stg-member-list__empty {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    padding: 12px 0;
    text-align: center;
}
.stg-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-lt);
}
.stg-member-row:last-child { border-bottom: none; }
.stg-member-row__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 500;
    flex-shrink: 0;
}
.stg-member-row__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.stg-member-row__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stg-member-row__email {
    font-size: 0.73rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stg-member-row__badge {
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-page-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-lt);
    white-space: nowrap;
}
.stg-member-row__badge--owner  { background: var(--color-purple-light-bg); color: var(--color-primary-dark); border-color: var(--color-purple-deep); }
.stg-member-row__badge--admin  { background: var(--color-role-admin-bg); color: var(--color-role-admin); border-color: var(--color-purple-light-bg); }
.stg-member-row__badge--member { background: var(--color-neutral-100); color: var(--color-neutral-700); border-color: rgba(91,97,110,0.3); }
.stg-member-row__role-select {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid var(--color-border-lt);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}
.stg-member-row__role-select:hover,
.stg-member-row__role-select:focus { border-color: var(--color-primary); }
.stg-member-row__remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    transition: color .15s, background .15s;
}
.stg-member-row__remove:hover { color: var(--color-error); background: var(--color-danger-alpha-08); }

/* ── Pending Invitations Table ── */
.stg-pending-invites {
    margin: 0 24px 16px;
    border-top: 1px solid var(--color-border-lt);
    padding-top: 16px;
}
.stg-pending-invites__header {
    margin-bottom: 12px;
}
.stg-pending-invites__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-md);
}
.stg-pending-invites__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}
.stg-pending-invites__table thead {
    background: var(--color-page-bg);
}
.stg-pending-invites__table th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-lt);
    white-space: nowrap;
}
.stg-pending-invites__table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-lt);
    color: var(--color-text-primary);
    vertical-align: middle;
}
.stg-pending-invites__table tbody tr:last-child td {
    border-bottom: none;
}
.stg-pending-invites__table tbody tr:hover {
    background: var(--color-primary-alpha-04);
}
.stg-pending-invites__row--joined {
    opacity: .6;
}
.stg-pending-invites__empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 20px 14px;
}
.stg-invite-email-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}
.stg-invite-email-icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
}
.stg-pending-invites__inviter {
    color: var(--color-text-sec);
}
.stg-pending-invites__date {
    color: var(--color-text-muted);
    white-space: nowrap;
}
.stg-invite-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.stg-invite-status--pending {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}
.stg-invite-status--joined {
    background: var(--color-success-bg);
    color: var(--color-success-deep);
}
.stg-pending-invites__revoke {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    transition: color .15s, background .15s;
}
.stg-pending-invites__revoke:hover {
    color: var(--color-error);
    background: var(--color-danger-alpha-08);
}

/* Invite code block */
.stg-invite-code-block {
    margin: 12px 24px 20px;
    padding: 12px 16px;
    background: var(--color-page-bg);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.stg-invite-code-block--subteam {
    margin: 12px 0 0;
    border-top: 1px solid var(--color-border-lt);
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    background: none;
    padding: 12px 0 0;
}
.stg-invite-code-block__info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--color-text-muted);
}
.stg-invite-code-block__info svg { flex-shrink: 0; margin-top: 2px; }
.stg-invite-code-block__label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
}
.stg-invite-code-block__hint {
    display: block;
    font-size: 0.73rem;
    color: var(--color-text-muted);
    margin-top: 1px;
}
.stg-invite-code-block__code-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.stg-invite-code {
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: .12em;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 4px 12px;
    color: var(--color-primary);
    user-select: all;
}

/* Subteam modal - invite-by-email panel */
.stg-add-member-panel {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--color-page-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-lt);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.stg-add-member-panel .stg-field__input { flex: 1; min-width: 140px; }

/* ═══════════════════════════════════════════════════════════════
   TEAM MANAGEMENT - Inline two-panel redesign
   All classes use the "tm-" prefix to avoid conflicts.
   ═══════════════════════════════════════════════════════════════ */

/* Widen the content area when the team-management tab is active */
.stg-content--wide {
    max-width: 920px;
}

/* ── Two-panel wrapper ── */
.tm-layout {
    display: flex;
    min-height: 520px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
}

/* ═══════════════════════════════════
   LEFT SIDEBAR
   ═══════════════════════════════════ */
.tm-sidebar {
    width: 228px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-border-lt);
    display: flex;
    flex-direction: column;
    background: var(--color-page-bg);
}

/* ── Inline form ── */
.tm-form {
    padding: 14px;
    border-bottom: 1px solid var(--color-border-lt);
    background: var(--color-surface);
}

.tm-form__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.tm-form__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
}

.tm-form__dismiss {
    background: none;
    border: none;
    padding: 3px;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}
.tm-form__dismiss:hover {
    background: var(--color-border-lt);
    color: var(--color-text);
}

.tm-form__input {
    width: 100%;
    padding: 7px 10px;
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-page-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    margin-bottom: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.tm-form__input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
}
.tm-form__input--area {
    resize: vertical;
    min-height: 52px;
    line-height: 1.5;
}

.tm-form__colors {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.tm-color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s, box-shadow 0.15s;
    outline: none;
}
.tm-color-dot:hover { transform: scale(1.2); }
.tm-color-dot.active {
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px rgba(0,0,0,0.25);
    transform: scale(1.1);
}

.tm-form__footer {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* ── Team list ── */
.tm-team-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.tm-team-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 16px;
    gap: 8px;
    color: var(--color-text-muted);
    text-align: center;
}
.tm-team-empty svg { opacity: 0.3; }
.tm-team-empty p  { font-size: 0.8rem; margin: 0; }

/* ── Team list item ── */
.tm-team-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background 0.12s;
}
.tm-team-item:hover  { background: var(--color-border-lt); }
.tm-team-item.active { background: var(--color-primary-alpha-07); }

.tm-team-item__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tm-team-item__info { flex: 1; min-width: 0; }

.tm-team-item__name {
    display: block;
    font-size: 0.8375rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tm-team-item.active .tm-team-item__name { color: var(--color-primary); }

.tm-team-item__meta {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: 1px;
}

.tm-team-item__badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-border-lt);
    padding: 2px 7px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* ── New Team button ── */
.tm-new-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--color-primary);
    background: none;
    border: none;
    border-top: 1px solid var(--color-border-lt);
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.12s;
}
.tm-new-btn:hover { background: var(--color-primary-alpha-05); }

/* ═══════════════════════════════════
   RIGHT DETAIL PANE
   ═══════════════════════════════════ */
.tm-detail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Empty state when no team selected */
.tm-detail__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--color-text-muted);
    padding: 48px 24px;
}
.tm-detail__empty svg { opacity: 0.22; }
.tm-detail__empty p   { font-size: 0.875rem; margin: 0; }

/* Scrollable detail pane */
.tm-detail__pane {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ── Team header ── */
.tm-detail__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px;
}

.tm-detail__identity {
    display: flex;
    align-items: center;
    gap: 13px;
}

.tm-detail__color-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.85;
}

.tm-detail__name {
    font-size: 1.075rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 3px;
}

.tm-detail__desc {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.tm-detail__hdr-actions {
    display: flex;
    gap: 4px;
}

/* ── Icon buttons ── */
.tm-icon-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.tm-icon-btn:hover { background: var(--color-border-lt); color: var(--color-text); }
.tm-icon-btn--danger:hover { background: var(--color-error-alpha-08); color: var(--color-error); }

/* ── Inline delete confirmation ── */
.tm-delete-confirm {
    margin: 0 24px 12px;
    padding: 11px 16px;
    background: var(--color-error-alpha-04);
    border: 1px solid var(--color-error-alpha-18);
    border-radius: var(--radius-sm);
}

.tm-delete-confirm__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tm-delete-confirm__inner p {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--color-text-sec);
    margin: 0;
    min-width: 140px;
}
.tm-delete-confirm__inner strong { color: var(--color-text); }

/* ── Divider ── */
.tm-divider {
    height: 1px;
    background: var(--color-border-lt);
    margin: 0 24px;
}

/* ── Members toolbar ── */
.tm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    gap: 12px;
}

.tm-toolbar__count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.tm-toolbar__actions {
    display: flex;
    gap: 6px;
}

/* ── Inline action panels (Add / Invite) ── */
.tm-action-panel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--color-page-bg);
    border-top: 1px solid var(--color-border-lt);
    border-bottom: 1px solid var(--color-border-lt);
    flex-wrap: wrap;
}

.tm-action-panel .stg-field__input,
.tm-action-panel .stg-field__input--select {
    flex: 1;
    min-width: 180px;
    margin: 0;
}

/* ── Members table ── */
.tm-members { border-top: 1px solid var(--color-border-lt); }

.tm-members__head {
    display: grid;
    grid-template-columns: 1fr 110px 110px 36px;
    padding: 8px 24px;
    background: var(--color-page-bg);
    border-bottom: 1px solid var(--color-border-lt);
    gap: 0;
}
.tm-members__head span {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.tm-members__row {
    display: grid;
    grid-template-columns: 1fr 110px 110px 36px;
    align-items: center;
    padding: 10px 24px;
    border-bottom: 1px solid var(--color-border-lt);
    gap: 0;
    transition: background 0.1s;
}
.tm-members__row:last-child { border-bottom: none; }
.tm-members__row:hover      { background: var(--color-page-bg); }

.tm-members__empty {
    padding: 28px 24px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.tm-members__loading {
    padding: 20px 24px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* ── Member row cells ── */
.tm-member__user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tm-member__avatar {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    flex-shrink: 0;
}

.tm-member__info { min-width: 0; }

.tm-member__name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-member__email {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Role select dropdown */
.tm-member__role-select {
    padding: 4px 22px 4px 8px;
    font-size: 0.7875rem;
    font-weight: 500;
    font-family: var(--font-sans);
    color: var(--color-text-sec);
    background: var(--color-page-bg);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-sm);
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    cursor: pointer;
    transition: border-color 0.15s;
    max-width: 98px;
}
.tm-member__role-select:focus { border-color: var(--color-primary); }
.tm-member__role-select:disabled { opacity: 0.5; cursor: default; }

/* Access label */
.tm-member__access {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* Remove button */
.tm-member__remove {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.tm-member__remove:hover { background: var(--color-error-alpha-08); color: var(--color-error); }
.tm-member__remove svg   { width: 14px; height: 14px; }

/* ── Invite code footer ── */
.tm-invite-code {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    margin-top: auto;
    border-top: 1px solid var(--color-border-lt);
    background: var(--color-page-bg);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.tm-invite-code__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-alpha-08);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    flex-shrink: 0;
}

.tm-invite-code__info { flex: 1; min-width: 0; }

.tm-invite-code__label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
}

.tm-invite-code__hint {
    display: block;
    font-size: 0.73rem;
    color: var(--color-text-muted);
}

.tm-invite-code__value {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    color: var(--color-primary);
    background: var(--color-primary-alpha-07);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    user-select: all;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .tm-layout              { flex-direction: column; min-height: unset; }
    .tm-sidebar             { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border-lt); }
    .tm-members__head       { grid-template-columns: 1fr 90px 30px; }
    .tm-members__head span:nth-child(3) { display: none; }
    .tm-members__row        { grid-template-columns: 1fr 90px 30px; }
    .tm-member__access      { display: none; }
}


/* ---------------------------------------
   PROFILE HERO CARD
   --------------------------------------- */

.stg-hero-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, var(--color-primary-alpha-06) 0%, var(--color-surface) 60%);
    border-bottom: 1px solid var(--color-border-lt);
}

.stg-hero-card__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inv);
    font-size: 1.75rem;
    font-weight: 600;
    flex-shrink: 0;
    border: 3px solid var(--color-surface);
    box-shadow: var(--shadow-md);
}

.stg-hero-card__info {
    flex: 1;
    min-width: 0;
}

.stg-hero-card__name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stg-hero-card__username {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 8px;
    font-family: var(--font-mono);
}

.stg-hero-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.stg-role-pill {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

.stg-role-pill--owner  { background: rgba(34,197,94,0.12); color: #16a34a; }
.stg-role-pill--admin  { background: var(--color-role-admin-bg); color: var(--color-role-admin); }
.stg-role-pill--member { background: var(--color-primary-alpha-08); color: var(--color-primary); }

/* ---------------------------------------
   SUB-TEAM GRID CARDS (replaces two-panel)
   --------------------------------------- */

.tm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    padding: 0;
}

.tm-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), border-color var(--transition);
}

.tm-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-border);
}

.tm-card__strip {
    height: 4px;
    background: var(--color-primary);
    flex-shrink: 0;
}

.tm-card__body {
    padding: 16px;
    flex: 1;
}

.tm-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.tm-card__dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.tm-card__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-card__desc {
    font-size: 0.8125rem;
    color: var(--color-text-sec);
    margin: 0 0 12px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

.tm-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.tm-card__meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-page-bg);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-full);
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-sec);
}

.tm-card__footer {
    padding: 10px 16px;
    background: var(--color-page-bg);
    border-top: 1px solid var(--color-border-lt);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* Create new team card */
.tm-card--create {
    border: 2px dashed var(--color-border);
    background: transparent;
    cursor: pointer;
    min-height: 160px;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.tm-card--create:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-alpha-04);
    box-shadow: none;
}

.tm-card--create__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
}

.tm-card--create svg {
    width: 28px;
    height: 28px;
    opacity: 0.5;
}

.tm-card--create:hover svg {
    opacity: 1;
}

.tm-card--create span {
    font-size: 0.875rem;
    font-weight: 600;
}

/* Teams section content wider */
.stg-content--wide {
    max-width: 960px;
}

/* ---------------------------------------
   MANAGE TEAM MODAL (replaces detail pane)
   --------------------------------------- */

.stg-modal--teams {
    width: 620px;
    max-width: 95vw;
    max-height: 88vh;
    overflow-y: auto;
}

/* ---------------------------------------
   INDIVIDUAL DANGER CARDS
   --------------------------------------- */

.stg-danger-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.stg-danger-card__accent {
    width: 5px;
    flex-shrink: 0;
}

.stg-danger-card--leave   .stg-danger-card__accent { background: #d97706; }
.stg-danger-card--transfer .stg-danger-card__accent { background: #ea580c; }
.stg-danger-card--delete  .stg-danger-card__accent { background: var(--color-error); }

.stg-danger-card__inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
}

.stg-danger-card__info { flex: 1; }

.stg-danger-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 4px;
}

.stg-danger-card__desc {
    font-size: 0.8375rem;
    color: var(--color-text-sec);
    margin: 0;
    line-height: 1.5;
}

.stg-danger-card__warning {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #d97706;
    margin-top: 6px;
}

/* ---------------------------------------
   ACCORDION (Role definitions)
   --------------------------------------- */

.stg-accordion {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
}

.stg-accordion__item {
    border-bottom: 1px solid var(--color-border-lt);
}

.stg-accordion__item:last-child {
    border-bottom: none;
}

.stg-accordion__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--color-surface);
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    transition: background var(--transition);
}

.stg-accordion__toggle:hover {
    background: var(--color-page-bg);
}

.stg-accordion__toggle-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stg-accordion__toggle-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.stg-accordion__chevron {
    color: var(--color-text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.stg-accordion__item.open .stg-accordion__chevron {
    transform: rotate(180deg);
}

.stg-accordion__content {
    display: none;
    padding: 0 20px 16px;
    background: var(--color-surface);
}

.stg-accordion__item.open .stg-accordion__content {
    display: block;
}

.stg-accordion__content .stg-role-card__perms {
    margin-top: 8px;
}

/* ---------------------------------------
   TEAMS INLINE FORM MODAL
   --------------------------------------- */

.stg-section__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Keep the hidden two-panel (needed for JS ID refs) */
.tm-layout { display: none !important; }