/* --- LFG-aligned cream / green tokens --- */
:root {
    --bg-main: #FBF6EC;
    --bg-surface: #f3ebe0;
    --text-main: #2C221E;
    --color-brand: #059669;
    --primary: var(--color-brand);
    --primary-hover: #047857;
    --primary-soft: #d1fae5;
    --secondary: #5d4037;
    --card-bg: #fffef9;
    --border-dark: #e2d6c4;
    --border-soft: #e2d6c4;
    --warn-bg: #fffbeb;
    --warn-border: #fde68a;
    --warn-text: #92400e;
    --info-bg: #ecfdf5;
    --info-border: #a7f3d0;
    --info-text: #065f46;
    --ok-bg: #f0fdf4;
    --ok-border: #bbf7d0;
    --ok-text: #166534;
    --danger-bg: #fff1f2;
    --danger-border: #fecdd3;
    --danger-text: #9f1239;
    --shadow-flat: 2px 2px 0 rgba(44, 34, 30, 0.18);
    --shadow-flat-lg: 3px 3px 0 rgba(44, 34, 30, 0.22);

    --color-bg-page: var(--bg-main);
    --color-bg-sidebar: var(--bg-surface);
    --color-bg-card: var(--card-bg);
    --color-text-primary: var(--text-main);
    --color-text-secondary: #5d4037;
    --color-text-muted: #64748b;
    --color-accent-blue: var(--color-brand);
    --color-accent-green: #047857;
    --color-accent-orange: #d97706;
    --color-accent-cyan: #0d9488;
    --color-bg-pill: var(--bg-surface);
    --color-bg-price: #d1fae5;
    --color-text-price: #047857;
    --color-secondary: var(--color-brand);
    --text-muted: var(--color-text-muted);
    --text-secondary: var(--color-text-secondary);
    --color-danger: #ef4444;
    --border-color: var(--border-soft);
    --border-width-bold: 1.5px;
    --border-radius-lg: 16px;
    --border-radius-md: 12px;
    --border-radius-sm: 10px;
    --font-family: "Noto Sans TC", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-base: 0.95rem;
    --transition-speed: 0.2s;
    --shadow-light: var(--shadow-flat);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tm-scheme="light"]) {
        --bg-main: #0f172a;
        --bg-surface: #1e293b;
        --text-main: #cbd5e1;
        --color-brand: #38bdf8;
        --primary: #38bdf8;
        --primary-hover: #0ea5e9;
        --secondary: #94a3b8;
        --card-bg: #1e293b;
        --border-dark: #64748b;
        --border-soft: #334155;
        --warn-bg: #422006;
        --warn-border: #854d0e;
        --warn-text: #fde68a;
        --info-bg: #0c4a6e;
        --info-border: #0369a1;
        --info-text: #bae6fd;
        --ok-bg: #14532d;
        --ok-border: #166534;
        --ok-text: #bbf7d0;
        --danger-bg: #4c0519;
        --danger-border: #9f1239;
        --danger-text: #fecdd3;
        --shadow-flat: 2px 2px 0px #475569;
        --shadow-flat-lg: 4px 4px 0px #475569;
        --color-bg-page: var(--bg-main);
        --color-bg-sidebar: var(--bg-surface);
        --color-bg-card: var(--card-bg);
        --color-text-primary: var(--text-main);
        --color-text-secondary: #94a3b8;
        --color-text-muted: #94a3b8;
        --color-bg-pill: var(--bg-surface);
        --color-bg-price: #1e3a5f;
        --text-muted: #94a3b8;
        --text-secondary: #94a3b8;
        --border-color: var(--border-dark);
        color-scheme: dark;
    }
}
html[data-tm-scheme="dark"] {
    --bg-main: #0f172a;
    --bg-surface: #1e293b;
    --text-main: #cbd5e1;
    --color-brand: #38bdf8;
    --primary: #38bdf8;
    --primary-hover: #0ea5e9;
    --secondary: #94a3b8;
    --card-bg: #1e293b;
    --border-dark: #64748b;
    --border-soft: #334155;
    --warn-bg: #422006;
    --warn-border: #854d0e;
    --warn-text: #fde68a;
    --info-bg: #0c4a6e;
    --info-border: #0369a1;
    --info-text: #bae6fd;
    --ok-bg: #14532d;
    --ok-border: #166534;
    --ok-text: #bbf7d0;
    --danger-bg: #4c0519;
    --danger-border: #9f1239;
    --danger-text: #fecdd3;
    --shadow-flat: 2px 2px 0px #475569;
    --shadow-flat-lg: 4px 4px 0px #475569;
    --color-bg-page: var(--bg-main);
    --color-bg-sidebar: var(--bg-surface);
    --color-bg-card: var(--card-bg);
    --color-text-primary: var(--text-main);
    --color-text-secondary: #94a3b8;
    --color-text-muted: #94a3b8;
    --color-bg-pill: var(--bg-surface);
    --color-bg-price: #1e3a5f;
    --text-muted: #94a3b8;
    --text-secondary: #94a3b8;
    --border-color: var(--border-dark);
    color-scheme: dark;
}
html[data-tm-scheme="light"] {
    --bg-main: #FBF6EC;
    --bg-surface: #f3ebe0;
    --text-main: #2C221E;
    --color-brand: #059669;
    --primary: #059669;
    --primary-hover: #047857;
    --primary-soft: #d1fae5;
    --secondary: #5d4037;
    --card-bg: #fffef9;
    --border-dark: #e2d6c4;
    --border-soft: #e2d6c4;
    --warn-bg: #fffbeb;
    --warn-border: #fde68a;
    --warn-text: #92400e;
    --info-bg: #ecfdf5;
    --info-border: #a7f3d0;
    --info-text: #065f46;
    --ok-bg: #f0fdf4;
    --ok-border: #bbf7d0;
    --ok-text: #166534;
    --danger-bg: #fff1f2;
    --danger-border: #fecdd3;
    --danger-text: #9f1239;
    --shadow-flat: 2px 2px 0 rgba(44, 34, 30, 0.18);
    --shadow-flat-lg: 3px 3px 0 rgba(44, 34, 30, 0.22);
    --color-bg-page: var(--bg-main);
    --color-bg-sidebar: var(--bg-surface);
    --color-bg-card: var(--card-bg);
    --color-text-primary: var(--text-main);
    --color-text-secondary: #5d4037;
    --color-text-muted: #64748b;
    --color-accent-blue: #059669;
    --color-accent-green: #047857;
    --color-bg-pill: var(--bg-surface);
    --color-bg-price: #d1fae5;
    --color-text-price: #047857;
    --text-muted: #64748b;
    --text-secondary: #5d4037;
    --border-color: var(--border-soft);
    --border-width-bold: 1.5px;
    color-scheme: light;
}

/* --- Global Reset & Basics --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    font-size: var(--font-size-base);
    overflow-x: clip;
}

@media (min-width: 801px) {
    body.colony-has-sidebar {
        padding-left: 180px;
    }
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(45, 52, 54, 0.2);
    border-radius: var(--border-radius-sm);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(45, 52, 54, 0.4);
}

/* --- Page Layout --- */
.app-container {
    display: block;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
}

/* --- Sidebar????????quick-nav-sidebar????+ ????????--- */
.sidebar {
    width: 180px;
    background-color: var(--color-bg-sidebar);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: auto;
    padding: 1.25rem 0.65rem;
    overflow: hidden;
    overscroll-behavior: contain;
    z-index: 50;
    transition: transform 0.25s ease;
}

.sidebar-header {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-text-primary);
    padding: 0 0.5rem 0.85rem 0.5rem;
    border-bottom: 1.5px solid rgba(45, 52, 54, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.sidebar-header-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar--nav-only .sidebar-game-list {
    display: none !important;
}

.sidebar-game-list {
    margin-top: 1rem;
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
}

.sidebar-game-list.is-open {
    display: block;
}

.sidebar-game-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.55rem;
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text-secondary);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-speed), color var(--transition-speed), opacity var(--transition-speed);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    border: none;
    background: transparent;
    text-align: left;
    font-family: var(--font-family);
    opacity: 0.72;
}

.sidebar-game-item:last-child {
    margin-bottom: 0;
}

.sidebar-game-item:hover {
    background-color: rgba(31, 90, 133, 0.08);
    color: var(--color-brand);
    opacity: 1;
}

.sidebar-game-item.active {
    background-color: rgba(31, 90, 133, 0.12);
    color: var(--color-brand);
    font-weight: 900;
    opacity: 1;
}

/* --- Main Content --- */
.main-content {
    flex: 1;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    overscroll-behavior: auto;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--bg-surface);
    margin-bottom: 1rem;
}

.brand-logo-text {
    font-family: var(--font-family);
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: var(--color-brand);
}

.colony-brand-logo.tm-brand-logo--dark,
.colony-main-chrome-logo.tm-brand-logo--dark {
  display: none;
}

html[data-tm-scheme="dark"] .colony-brand-logo.tm-brand-logo--light,
html[data-tm-scheme="dark"] .colony-main-chrome-logo.tm-brand-logo--light {
  display: none;
}

html[data-tm-scheme="dark"] .colony-brand-logo.tm-brand-logo--dark,
html[data-tm-scheme="dark"] .colony-main-chrome-logo.tm-brand-logo--dark {
  display: block;
}

.colony-brand-logo {
    height: 2.75rem;
    width: auto;
    max-width: none;
    object-fit: contain;
    flex-shrink: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-back-tablemate {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--bg-main);
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: none;
    transition: all var(--transition-speed);
}

.btn-back-tablemate--icon {
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    justify-content: center;
    flex-shrink: 0;
}

.btn-back-tablemate--icon i {
    font-size: 0.9rem;
}

.btn-back-tablemate:hover {
    background: var(--bg-surface);
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-flat-lg);
}

.colony-handoff-banner {
    margin: 0.65rem 0 0.85rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.colony-handoff-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: #fff7ed;
    color: #9a3412;
    font-size: 0.82rem;
    font-weight: 700;
}

.btn-colony-handoff-login {
    margin-left: auto;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 2px solid var(--text-main);
    background: var(--card-bg);
    color: var(--text-main);
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
    box-shadow: none;
}

.btn-colony-handoff-login:hover {
    background: var(--bg-surface);
    transform: none;
    box-shadow: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.colony-header-refresh-btn,
.header-refresh-btn.colony-header-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 38px;
    height: 38px;
    padding: 0 0.7rem;
    border-radius: 12px;
    border: 2px solid var(--text-main);
    background: var(--card-bg);
    color: var(--color-brand, #0ea5e9);
    font-weight: 800;
    font-size: 0.72rem;
    font-family: var(--font-family);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.colony-header-refresh-btn:hover,
.header-refresh-btn.colony-header-refresh-btn:hover {
    background: var(--info-bg);
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-flat);
}

.colony-header-refresh-btn:disabled,
.header-refresh-btn.colony-header-refresh-btn:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
    box-shadow: none;
}

.colony-header-refresh-btn.is-spinning i,
.colony-embed-lib-action-btn--refresh.is-spinning i {
    animation: colonyRefreshSpin 0.8s linear infinite;
}

.colony-header-refresh-btn .header-refresh-btn__label {
    line-height: 1;
}

.colony-embed-lib-action-btn--refresh {
    color: var(--color-brand, #0ea5e9);
}

@keyframes colonyRefreshSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- lang-zh / lang-en?]?P?D???P????G????b DOM?A?H body class ?????i????^ --- */
body.lang-zh .lang-en { display: none !important; }
body.lang-en .lang-zh { display: none !important; }

/* --- Standalone ?D????????]?m??l???????W?^ --- */
.colony-main-chrome {
    display: none;
    flex-shrink: 0;
    width: 100%;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-soft);
    box-sizing: border-box;
}

.colony-main-chrome-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.45rem max(0.65rem, env(safe-area-inset-right)) 0.45rem max(0.65rem, env(safe-area-inset-left));
    padding-top: max(0.45rem, env(safe-area-inset-top));
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
}

.colony-main-chrome-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.colony-main-chrome-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    display: block;
}

.colony-main-chrome-sea {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--bg-main);
    color: var(--color-brand);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.colony-main-chrome-sea:hover {
    background: var(--primary-soft, #d1fae5);
    border-color: color-mix(in srgb, var(--color-brand) 40%, var(--border-soft));
}

.colony-main-chrome-sea i {
    font-size: 14px;
}

.colony-main-chrome-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    min-width: 0;
    flex-wrap: nowrap;
}

.colony-main-chrome-actions .header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

html.tm-colony-standalone .colony-main-chrome:not([hidden]) {
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 13060;
}

html.tm-colony-standalone body.colony-merchant-embed-active .colony-main-chrome:not([hidden]) {
    position: fixed;
    width: 100%;
    z-index: 13060;
}

html.tm-colony-standalone {
    --colony-main-chrome-h: 56px;
}

html.tm-colony-standalone .colony-sticky-bar {
    display: none !important;
}

html.tm-colony-standalone .main-header .brand {
    display: none;
}

html.tm-colony-standalone .main-header {
    display: none !important;
}

@media (min-width: 801px) {
    html.tm-colony-standalone .sub-pill-bar {
        position: sticky;
        top: var(--colony-main-chrome-h, 56px);
        z-index: 220;
    }

    html.tm-colony-standalone body.colony-merchant-embed-active .sub-pill-bar {
        top: var(--colony-main-chrome-h, 56px) !important;
    }

    html.tm-colony-standalone body.colony-merchant-embed-active .colony-merchant-embed-shell {
        top: calc(var(--colony-main-chrome-h, 56px) + var(--colony-desktop-subpill-h, 58px)) !important;
    }
}

@media (max-width: 800px) {
    html.tm-colony-standalone .colony-main-chrome-logo {
        height: 36px;
    }

    html.tm-colony-standalone .colony-main-chrome-sea {
        padding: 6px 8px;
    }

    html.tm-colony-standalone .colony-main-chrome-sea .lang-zh,
    html.tm-colony-standalone .colony-main-chrome-sea .lang-en {
        /* ???????????r?A???n???Y?u?G?O?d?D???i???D?? */
        font-size: 12px;
    }

    html.tm-colony-standalone .colony-main-chrome-actions .colony-header-refresh-btn .header-refresh-btn__label {
        display: none;
    }

    html.tm-colony-standalone .colony-main-chrome-actions .btn-profile-login .btn-login-label {
        display: none;
    }

    html.tm-colony-standalone .colony-main-chrome-actions .user-profile-badge .auth-btn-name {
        display: none !important;
    }
}

/* --- Mobile sticky top bar (??????? EN ? ??? ? ???) --- */
.colony-sticky-bar {
    display: none;
}

.colony-sticky-bar-left {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 auto;
}

.colony-sticky-bar-back {
    flex-shrink: 0;
}

.colony-sticky-bar-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0.35rem 0.45rem;
    margin: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-main);
    font-family: var(--font-family);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.colony-sticky-bar-nav:hover {
    background: rgba(0, 0, 0, 0.04);
}

.colony-sticky-bar-nav:active {
    background: rgba(0, 0, 0, 0.07);
}

.colony-sticky-bar-quick {
    flex-shrink: 0;
    white-space: nowrap;
}

.colony-sticky-bar-arrow {
    flex-shrink: 0;
    font-size: 0.55rem;
    opacity: 0.55;
}

.colony-sticky-bar-context {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-brand);
}

#btnSwitchLanguage.header-icon-btn {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.header-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background-color: var(--bg-main);
    color: var(--text-main);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: none;
    transition: all var(--transition-speed);
}

.header-icon-btn:hover {
    transform: none;
    box-shadow: none;
    background-color: var(--primary-soft);
    border-color: color-mix(in srgb, var(--color-brand) 35%, var(--border-soft));
    color: var(--primary-hover);
}

.bell-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-accent-green);
    border: 1.5px solid var(--color-bg-card);
}

/* Auth Profile badges */
.btn-profile-login {
    height: 38px;
    padding: 0 1rem;
    border-radius: 999px;
    border: 2px solid var(--text-main);
    background-color: var(--text-main);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: var(--shadow-flat);
    transition: all var(--transition-speed);
}

.btn-profile-login:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-flat-lg);
}

.user-profile-badge {
    height: 38px;
    padding: 4px 10px 4px 4px;
    border-radius: 20px;
    border: none;
    background-color: #10b981;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.user-profile-badge.has-update {
    position: relative;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.45), 0 2px 5px rgba(0, 0, 0, 0.1);
}

.user-profile-badge.has-update::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border: 2px solid #fff;
    border-radius: 50%;
}

.user-profile-badge.auth-pending-sync {
    opacity: 0.88;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65), 0 2px 5px rgba(0, 0, 0, 0.08);
}

.profile-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    object-fit: cover;
    flex-shrink: 0;
}

.auth-btn-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-text {
    white-space: nowrap;
}

.profile-logout-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

.profile-logout-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* --- Toolbar Buttons --- */
.toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.toolbar-left, .toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-top {
    font-family: var(--font-family);
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.45rem 1rem;
    border-radius: var(--border-radius-md);
    border: var(--border-width-bold) solid var(--border-color);
    color: #fff;
    cursor: pointer;
    box-shadow: var(--shadow-flat);
    transition: all var(--transition-speed);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-top:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-flat-lg);
}

.btn-top:active {
    transform: translateY(0);
    box-shadow: 0 2px 0px var(--border-color);
}

.btn-edit-mode {
    background-color: var(--color-accent-orange);
}

.btn-edit-mode.active {
    box-shadow: inset 0 0 0 2px #fff, var(--shadow-flat-lg);
    filter: brightness(0.92);
}

.btn-add-game {
    background-color: var(--color-brand);
}

.btn-sync-cloud {
    background-color: var(--color-accent-blue);
}

/* Library Switcher Card */
.lib-switcher-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: min(100%, 360px);
    max-width: 420px;
    padding: 0.65rem 0.75rem;
    background: linear-gradient(180deg, var(--card-bg) 0%, var(--bg-surface) 100%);
    border: 1.5px solid var(--border-soft, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    color: var(--text-main);
}

.lib-switcher-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lib-switcher-label i {
    color: var(--color-brand);
    font-size: 0.8rem;
}

.lib-switcher-main {
    width: 100%;
}

.lib-switcher-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--card-bg, #fff);
    border: 1.5px solid var(--border-soft, #cbd5e1);
    border-radius: 10px;
    padding: 0 0.65rem;
    min-height: 42px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lib-switcher-select-wrap:focus-within {
    border-color:var(--text-main);
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.1);
}

.lib-switcher-icon {
    flex-shrink: 0;
    width: 1.1rem;
    text-align: center;
    color: #0ea5e9;
    font-size: 0.95rem;
}

.lib-switcher-select {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-family: var(--font-family);
    font-size: 0.88rem;
    font-weight: 700;
    color:var(--text-main);
    padding: 0.55rem 0.35rem;
    cursor: pointer;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
}

.lib-switcher-chevron {
    flex-shrink: 0;
    color:var(--text-muted);
    font-size: 0.7rem;
    pointer-events: none;
}

.lib-switcher-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    width: 100%;
}

.lib-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 52px;
    padding: 0.4rem 0.25rem;
    border: 1.5px solid var(--border-soft, #e2e8f0);
    border-radius: 10px;
    background: var(--card-bg, #fff);
    color: var(--text-main, #475569);
    font-family: var(--font-family);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lib-action-btn i {
    font-size: 0.95rem;
    color: var(--text-muted, #64748b);
}

.lib-action-btn:hover:not(:disabled) {
    border-color: var(--text-muted, #94a3b8);
    background: var(--bg-surface, #f8fafc);
    transform: translateY(-1px);
}

.lib-action-btn:active:not(:disabled) {
    transform: translateY(0);
}

.lib-action-btn--primary {
    background: #1e293b;
    border-color:var(--text-main);
    color: #fff;
}

.lib-action-btn--primary i {
    color: #fff;
}

.lib-action-btn--primary:hover:not(:disabled) {
    background: #334155;
    border-color:var(--text-main);
}

.lib-action-btn.is-disabled,
.lib-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.lib-action-label {
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

/* Legacy alias (unused) */
.lib-selector-group {
    display: flex;
    align-items: center;
    background: var(--color-bg-card);
    border: var(--border-width-bold) solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 0.2rem 0.4rem;
    gap: 0.25rem;
}

.lib-selector-group select {
    border: none;
    outline: none;
    font-family: var(--font-family);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-primary);
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    background: transparent;
}

.btn-lib-action {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.2rem;
    display: flex;
    align-items: center;
    transition: color var(--transition-speed);
}

.btn-lib-action:hover {
    color: var(--color-accent-blue);
}

/* --- Search & Filters Row --- */
body.colony-lobby-mode .search-filter-row,
body.colony-lobby-mode #colonyFilterModal,
body.colony-lobby-mode .count-banner {
    display: none !important;
}

.colony-filter-modal-content {
    max-width: 720px;
    width: 96vw;
}
.colony-filter-modal-body.collapsible-filters-panel {
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
}

.search-filter-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.search-box-wrapper {
    flex: 1.5;
    min-width: 200px;
    position: relative;
    display: flex;
    align-items: center;
}

.search-box-wrapper input {
    width: 100%;
    height: 42px;
    border: var(--border-width-bold) solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 0 1rem 0 2.5rem;
    font-family: var(--font-family);
    font-size: 0.9rem;
    color: var(--color-text-primary);
    outline: none;
    background-color: var(--color-bg-card);
    transition: all var(--transition-speed);
}

.search-box-wrapper input:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

.search-box-wrapper .search-icon {
    position: absolute;
    left: 1rem;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

.sort-wrapper,
.cabinet-filter-wrapper {
    flex: 1;
    min-width: 160px;
}

.sort-wrapper {
    position: relative;
    flex: 0.95;
    min-width: 130px;
    max-width: 240px;
    overflow: visible;
}

.cabinet-filter-wrapper {
    position: relative;
    flex: 0.85;
    min-width: 120px;
    max-width: 220px;
    /* ???? body + fixed???? toolbar overflow ?? */
    overflow: visible;
}

.cabinet-filter-share-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 42px;
    padding: 0 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-brand, #0ea5e9) 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-brand, #0ea5e9) 12%, var(--color-surface, #fff));
    color: var(--color-brand, #0ea5e9);
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

.cabinet-filter-share-btn:hover {
    background: color-mix(in srgb, var(--color-brand, #0ea5e9) 20%, var(--color-surface, #fff));
    transform: translateY(-1px);
}

.cabinet-filter-share-btn:active {
    transform: translateY(0);
}

.cabinet-filter-share-btn[hidden] {
    display: none !important;
}

.cabinet-filter-share-btn i {
    font-size: 0.9rem;
}

.cabinet-filter-native,
.sort-menu-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.cabinet-filter-trigger,
.sort-menu-trigger {
    width: 100%;
    height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: var(--border-width-bold) solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 0 0.65rem 0 0.75rem;
    font-family: var(--font-family);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-primary);
    outline: none;
    background-color: var(--color-bg-card);
    cursor: pointer;
    box-shadow: var(--shadow-flat);
    transition: background-color var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed), transform var(--transition-speed);
}

.cabinet-filter-trigger:hover,
.sort-menu-trigger:hover {
    background-color: var(--color-bg-sidebar);
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-flat-lg);
}

.cabinet-filter-trigger:focus-visible,
.sort-menu-trigger:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.cabinet-filter-trigger.is-open,
.cabinet-filter-trigger.is-filtered,
.sort-menu-trigger.is-open,
.sort-menu-trigger.is-custom {
    border-color: var(--color-brand);
    background: #eff6ff;
    color: var(--color-brand);
}

.cabinet-filter-trigger-icon,
.sort-menu-trigger-icon {
    flex-shrink: 0;
    font-size: 0.88rem;
    opacity: 0.85;
}

/* ChipSelectMenu ???? SVG?class ? sort-menu-item-icon? */
.sort-menu-trigger > svg.sort-menu-item-icon {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    opacity: 0.85;
}
.sort-menu-trigger > svg.sort-menu-trigger-chevron {
    width: 0.85rem;
    height: 0.85rem;
}

.cabinet-filter-trigger-label,
.sort-menu-trigger-label {
    flex: 1;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cabinet-filter-trigger-chevron,
.sort-menu-trigger-chevron {
    flex-shrink: 0;
    font-size: 0.7rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.cabinet-filter-trigger.is-open .cabinet-filter-trigger-chevron,
.sort-menu-trigger.is-open .sort-menu-trigger-chevron {
    transform: rotate(180deg);
}

/* fixed + ?? body??? overflow ??? FAB ????? modal 13150+??? remote FAB 13050? */
.cabinet-filter-panel,
.sort-menu-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: min(320px, calc(100vw - 16px));
    max-height: min(420px, 70vh);
    margin: 0;
    background: var(--color-bg-card);
    border: var(--border-width-bold) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-flat-lg);
    z-index: 13100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: top center;
    animation: cabinetFilterPanelIn 0.16s ease;
    pointer-events: auto;
}

.sort-menu-panel {
    width: min(300px, calc(100vw - 16px));
    max-height: min(400px, 70vh);
}

.cabinet-filter-panel[hidden],
.sort-menu-panel[hidden] {
    display: none !important;
    pointer-events: none;
}

@keyframes cabinetFilterPanelIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cabinet-filter-panel-head,
.sort-menu-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid var(--border-soft, rgba(44, 34, 30, 0.1));
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--card-bg) 100%);
    flex-shrink: 0;
}

.cabinet-filter-panel-title,
.sort-menu-panel-title {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
}

.cabinet-filter-panel-close,
.sort-menu-panel-close {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.cabinet-filter-panel-close:hover,
.sort-menu-panel-close:hover {
    background: var(--color-bg-sidebar);
    border-color: rgba(44, 34, 30, 0.15);
    color: var(--color-text-primary);
}

.cabinet-filter-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.15rem;
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid rgba(44, 34, 30, 0.08);
    background: #f7f4eb;
    min-height: 2.25rem;
    flex-shrink: 0;
}

.cabinet-filter-crumb-seg {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
}

.cabinet-filter-crumb-btn {
    border: none;
    background: none;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    font-family: var(--font-family);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-brand);
    cursor: pointer;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cabinet-filter-crumb-btn:hover {
    background: rgba(31, 90, 133, 0.1);
}

.cabinet-filter-crumb-btn.is-current {
    color: var(--color-text-primary);
    cursor: default;
    font-weight: 800;
}

.cabinet-filter-crumb-btn.is-current:hover {
    background: none;
}

.cabinet-filter-crumb-sep {
    color: var(--color-text-muted);
    font-size: 0.65rem;
    opacity: 0.7;
}

.cabinet-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid rgba(44, 34, 30, 0.08);
    background: var(--card-bg);
    flex-shrink: 0;
}

.cabinet-filter-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 32px;
    padding: 0.25rem 0.55rem;
    border: 1.5px solid rgba(44, 34, 30, 0.14);
    border-radius: 8px;
    background: #f7f4eb;
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.cabinet-filter-action-btn:hover {
    border-color: rgba(31, 90, 133, 0.35);
    background: #eff6ff;
    color: var(--color-brand);
}

.cabinet-filter-action-btn.is-active {
    border-color: rgba(31, 90, 133, 0.45);
    background: #eff6ff;
    color: var(--color-brand);
}

.cabinet-filter-action-btn.is-muted {
    color: var(--color-text-secondary);
    background: transparent;
}

.cabinet-filter-list {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.35rem;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.cabinet-filter-group-label {
    padding: 0.55rem 0.65rem 0.25rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.cabinet-filter-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.45rem 0.65rem;
    border: 1.5px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: 0.84rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    touch-action: manipulation;
}

.cabinet-filter-item:hover,
.cabinet-filter-item:focus-visible {
    background: #f7f4eb;
    border-color: rgba(44, 34, 30, 0.12);
    outline: none;
}

.cabinet-filter-item.is-selected {
    background: #eff6ff;
    border-color: rgba(31, 90, 133, 0.35);
    color: var(--color-brand);
}

.cabinet-filter-item-icon {
    width: 1.1rem;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.78rem;
    opacity: 0.75;
}

.cabinet-filter-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.cabinet-filter-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cabinet-filter-item-meta {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.cabinet-filter-item-count {
    flex-shrink: 0;
    min-width: 1.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(44, 34, 30, 0.06);
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
    text-align: center;
}

.cabinet-filter-item.is-selected .cabinet-filter-item-count {
    background: rgba(31, 90, 133, 0.12);
    color: var(--color-brand);
}

.cabinet-filter-item-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: -0.25rem;
    border-radius: 8px;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    cursor: pointer;
}

.cabinet-filter-item-chevron:hover,
.cabinet-filter-item-chevron:focus-visible {
    background: rgba(31, 90, 133, 0.12);
    color: var(--color-brand);
    outline: none;
}

.cabinet-filter-empty {
    padding: 1.25rem 0.85rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.sort-menu-list {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.35rem;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.sort-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.45rem 0.65rem;
    border: 1.5px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: 0.84rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    touch-action: manipulation;
}

.sort-menu-item:hover,
.sort-menu-item:focus-visible {
    background: #f7f4eb;
    border-color: rgba(44, 34, 30, 0.12);
    outline: none;
}

.sort-menu-item.is-selected {
    background: #eff6ff;
    border-color: rgba(31, 90, 133, 0.35);
    color: var(--color-brand);
}

.sort-menu-item-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.78rem;
    opacity: 0.75;
}

.sort-menu-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sort-menu-item-check {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--color-brand);
}

.filter-toggle-btn {
    height: 42px;
    padding: 0 1.25rem;
    border: var(--border-width-bold) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all var(--transition-speed);
}

.filter-toggle-btn:hover {
    background-color: var(--color-bg-sidebar);
}

/* ???????????????????????? */
.colony-view-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

.colony-view-mode-switch {
    display: flex;
    background: var(--bg-surface);
    padding: 3px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.view-mode-btn {
    background: transparent;
    border: none;
    border-radius: 16px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color:var(--text-muted);
    transition: all 0.15s;
}

.view-mode-btn:hover {
    color: var(--color-brand);
}

.view-mode-btn.active {
    color: var(--color-brand);
}

.colony-card-density-container {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 0;
    padding: 0 10px;
    border-left: 1px solid #cbd5e1;
    flex-shrink: 0;
    color:var(--text-muted);
    font-size: 11px;
}

.colony-card-density-label {
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
}

.colony-card-density-container i {
    font-size: 12px;
}

#colony-card-density-slider {
    width: 60px;
    height: 4px;
    cursor: pointer;
    accent-color: var(--color-brand);
}

#colony-card-density-value {
    font-size: 11px;
    color: #0ea5e9;
    font-weight: 800;
    min-width: 10px;
}

.layout-toggle-group {
    display: flex;
    border: var(--border-width-bold) solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.layout-btn {
    height: 38px;
    width: 38px;
    background-color: var(--color-bg-card);
    border: none;
    border-right: 1px solid rgba(45, 52, 54, 0.15);
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed);
}

.layout-btn:last-child {
    border-right: none;
}

.layout-btn:hover {
    background-color: var(--color-bg-sidebar);
}

.layout-btn.active {
    background-color: var(--color-bg-sidebar);
    color: var(--color-text-primary);
    font-weight: 800;
}

/* --- Collapsible Advanced Filters Panel --- */
.collapsible-filters-panel {
    background: var(--color-bg-card);
    border: var(--border-width-bold) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.filter-group label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.filter-group select {
    height: 36px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0 0.5rem;
    font-family: var(--font-family);
    font-size: 0.82rem;
    color: var(--color-text-primary);
    background-color: var(--color-bg-card);
    outline: none;
    cursor: pointer;
}

/* ?????????????? ? ChipSelectMenu??????????? */
.colony-filter-modal-body .filter-group > .chip-select-root,
.colony-filter-modal-body .filter-group > .sort-wrapper {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex: none;
    overflow: visible;
}
.colony-filter-modal-body .sort-menu-trigger,
.colony-filter-modal-body .sort-menu-trigger--compact {
    height: 38px;
    min-height: 38px;
    border-width: 1.5px;
    border-radius: var(--border-radius-sm);
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: none;
    background: var(--color-bg-card);
}
.colony-filter-modal-body .sort-menu-trigger:hover,
.colony-filter-modal-body .sort-menu-trigger--compact:hover {
    transform: none;
    box-shadow: none;
    background: var(--bg-surface);
}
/* ??? body?????? modal?.modal ? 2800? */
body:has(#colonyFilterModal.active) .sort-menu-panel {
    z-index: 4000;
}

.filter-group--category-tag {
    grid-column: 1 / -1;
}

.colony-filter-category-current {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.65rem;
    background: var(--info-bg);
    border: 1px solid #bae6fd;
    border-radius: 10px;
    font-size: 0.82rem;
}

.colony-filter-category-current-label {
    color:var(--text-muted);
    font-weight: 700;
}

.colony-filter-category-current strong {
    color: #0369a1;
    font-weight: 800;
}

.colony-filter-tag-picker .colony-tag-search-input {
    width: 100%;
    box-sizing: border-box;
}

.colony-filter-tag-chip.is-selected {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1d4ed8;
}

.filter-toggle-btn.is-active {
    border-color: var(--color-brand);
    background: #eff6ff;
    color: var(--color-brand);
}

.filter-toggle-btn.active {
    border-color: var(--color-brand);
    background: #eff6ff;
    color: var(--color-brand);
}

.filters-checkbox-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(45, 52, 54, 0.1);
}

.toggle-container {
    position: relative;
    padding-left: 1.8rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
}

.toggle-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    left: 0;
    height: 18px;
    width: 18px;
    border: 1.5px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--card-bg);
    transition: all var(--transition-speed);
}

.toggle-container:hover input ~ .checkmark {
    background-color: var(--color-bg-sidebar);
}

.toggle-container input:checked ~ .checkmark {
    background-color: var(--color-accent-blue);
    border-color: var(--border-color);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.toggle-container input:checked ~ .checkmark:after {
    display: block;
}

.toggle-container .checkmark:after {
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* --- Main Navigation Tabs --- */
.main-tabs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.main-tab-btn {
    flex: 1;
    height: 48px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background-color: var(--color-bg-card);
    color: var(--color-text-secondary);
    font-family: var(--font-family);
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all var(--transition-speed);
}

.main-tab-btn:hover {
    background-color: var(--color-bg-sidebar);
}

.main-tab-btn.active {
    background-color: var(--primary-soft, #d1fae5);
    color: #065f46;
    border: 1px solid #6ee7b7;
    box-shadow: none;
}

/* --- Sub Pill Bar --- */
.sub-pill-bar {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    align-items: center;
    background: color-mix(in srgb, var(--card-bg) 96%, transparent);
    border: 1px solid var(--border-soft);
    border-radius: 0 0 12px 12px;
    scrollbar-width: thin;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 35;
    backdrop-filter: blur(8px);
    scroll-snap-type: x proximity;
}

.sub-pill-btn {
    padding: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background-color: var(--card-bg);
    color:var(--text-main);
    scroll-snap-align: center;
    font-family: var(--font-family);
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(44, 34, 30, 0.04);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-sizing: border-box;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.sub-pill-btn[hidden] {
    display: none !important;
}

.sub-pill-btn:active {
    transform: scale(0.96);
    opacity: 0.92;
}

.sub-pill-btn .sub-pill-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    flex-shrink: 0;
}

/* ???????????G????]??r??? .sub-pill-text?^?F?????U?? media */
.sub-pill-btn .sub-pill-text {
    display: none;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    max-width: 7.5em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sub-pill-btn:hover {
    background-color: var(--bg-surface);
}

.sub-pill-btn.active {
    background-color: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
    box-shadow: 2px 2px 0 rgba(4, 120, 87, 0.22);
}

.colony-merchant-sub-pills {
    display: inline-flex;
    gap: 8px;
    flex-wrap: nowrap;
}

.colony-merchant-sub-pills[hidden] {
    display: none !important;
}

.sub-pill-btn--shop.active {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
}

.sub-pill-btn--post.active {
    background-color: #047857;
    border-color: #047857;
}

.sub-pill-btn--rent.active {
    background-color: #0d9488;
    border-color: #0d9488;
}

.sub-pill-btn--info.active {
    background-color: #059669;
    border-color: #059669;
}

.sub-pill-btn--seller .sub-pill-icon {
    stroke: #047857;
}

.sub-pill-btn--points.active {
    background-color: #059669;
    border-color: #059669;
}

.sub-pill-btn--ticket.active {
    background-color: #ca8a04;
    border-color: #ca8a04;
}

/* ???G?????????????r */
@media (min-width: 801px) {
    :root {
        /* Measured at runtime via syncColonySubPillBarHeight(); 58px matches padding+40px btn+border */
        --colony-desktop-subpill-h: 58px;
    }

    .sub-pill-bar {
        position: sticky;
        top: 0;
        z-index: 80;
        margin-bottom: 10px;
    }

    .sub-pill-btn {
        width: auto;
        min-width: 40px;
        padding: 0 12px;
        gap: 6px;
    }

    .sub-pill-btn .sub-pill-text {
        display: inline;
    }

    html.tm-embedded .sub-pill-btn {
        width: auto;
        min-width: 40px;
        padding: 0 12px;
        gap: 6px;
    }

}

.lib-settings-danger-zone {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 2px dashed #fecaca;
}

.lib-settings-danger-title {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #b91c1c;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.lib-settings-danger-hint {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color:var(--text-muted);
    line-height: 1.5;
}

.colony-mfeat-panel--rental .colony-mfeat-panel-head {
    background: var(--warn-bg);
    border-bottom-color: #fde68a;
}

.colony-mfeat-panel--rental .colony-mfeat-panel-head h2 {
    color: #b45309;
}

.colony-mfeat-hint--rental {
    color: #92400e;
    background: var(--warn-bg);
    border-bottom: 1px solid #fde68a;
}

.colony-mfeat-list--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.colony-mfeat-rental-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.colony-mfeat-rental-card-top {
    position: relative;
}

.colony-mrent-qty-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    font-size: 0.72rem;
    font-weight: 800;
    color:var(--text-main);
    background: var(--border-soft);
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1.3;
}

.colony-mrent-qty-badge--rent {
    background: #dcfce7;
    color: #166534;
}

.colony-mrent-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid #e2e8f0;
}

.colony-mrent-actions-bar .colony-mrent-buy-method {
    flex: 1 1 120px;
    min-width: 0;
    max-width: 180px;
}

.colony-mrent-stock-hint {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.colony-mfeat-rental-thumb {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.colony-mfeat-rental-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.colony-mfeat-rental-body {
    flex: 1;
    min-width: 0;
}

.colony-mfeat-panel--storeinfo .colony-mfeat-panel-head {
    background: var(--ok-bg);
    border-bottom-color: #bbf7d0;
}

.colony-mfeat-panel--storeinfo .colony-mfeat-panel-head h2 {
    color: #15803d;
}

.colony-mrent-info-card {
    padding: 1rem 1.1rem 1.25rem;
}

.colony-mrent-info-name {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    color:var(--text-main);
}

.colony-mrent-info-row {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    color:var(--text-main);
    line-height: 1.5;
}

.colony-mrent-info-row i {
    width: 1.1rem;
    color:var(--text-muted);
    margin-right: 0.35rem;
}

.colony-mrent-map-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.colony-mrent-map-link:hover {
    text-decoration: underline;
}

.colony-mrent-info-desc {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-surface);
    border-radius: 10px;
    font-size: 0.9rem;
    color:var(--text-muted);
    line-height: 1.6;
    white-space: pre-wrap;
}

.colony-mrent-muted {
    color:var(--text-muted);
}

.colony-mrent-settings {
    padding: 0.75rem 1rem;
    background: var(--warn-bg);
    border-bottom: 1px solid #fde68a;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.colony-mrent-hold-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: #92400e;
    font-weight: 600;
}

.colony-mrent-hold-label input {
    width: 4.5rem;
}

.colony-mrent-hold-desc {
    font-size: 0.78rem;
    color: #b45309;
}

.colony-mrent-add-panel {
    margin: 0.75rem 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: var(--bg-surface);
}

.colony-mrent-add-panel summary {
    cursor: pointer;
    padding: 0.65rem 0.85rem;
    font-weight: 700;
    color:var(--text-main);
}

.colony-mrent-add-form {
    padding: 0 0.85rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.colony-mrent-add-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}

.colony-mrent-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.82rem;
    color:var(--text-muted);
}

.colony-mrent-field--market .colony-mrent-inline-check {
    font-size: 0.75rem;
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.colony-mrent-methods-edit,
.colony-mrent-fee-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
}

.colony-mrent-method-check {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.35rem 0.55rem;
}

.colony-mrent-action-block {
    padding: 0.65rem 0.85rem;
    border-top: 1px solid #f1f5f9;
    background: var(--bg-surface);
}

.colony-mrent-action-block--sell {
    background: var(--info-bg);
}

.colony-mrent-stock {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color:var(--text-muted);
    margin-bottom: 0.45rem;
}

.colony-mrent-ok { color: #16a34a; font-weight: 700; }
.colony-mrent-out { color: #ef4444; font-weight: 700; }

.colony-mrent-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.colony-mrent-qty-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
}

.colony-mrent-qty-label input {
    width: 3.5rem;
}

.colony-mrent-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}

.colony-mrent-method-tag {
    font-size: 0.75rem;
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
}

.colony-mrent-admin-details {
    border-top: 1px dashed #e2e8f0;
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
}

.colony-mrent-admin-details summary {
    cursor: pointer;
    color:var(--text-muted);
    font-weight: 600;
}

.colony-mrent-admin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.colony-mrent-admin-row--expired {
    opacity: 0.85;
    color: #be123c;
}

.colony-mrent-admin-status {
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

.colony-mrent-card-actions {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem 0.75rem;
    border-top: 1px solid #f1f5f9;
}

.sub-pill-btn--info.active {
    background: #dcfce7;
    color: #15803d;
    border-color: #86efac;
}

.colony-merchant-subnav-btn[data-colony-merchant-page="storeinfo"].active {
    background: #dcfce7;
    color: #15803d;
    border-color: #86efac;
}

/* --- Total Count Info Banner --- */
.count-banner {
    background-color: var(--bg-surface);
    color: var(--text-main);
    border: 2px solid var(--text-main);
    border-radius: var(--border-radius-md);
    padding: 0.45rem 0.55rem 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    box-shadow: var(--shadow-flat);
}

.count-banner__main {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex: 1;
}

.count-banner__main.is-clickable {
    cursor: pointer;
}

.count-banner span#gameCount,
.count-banner #gameCount {
    color: var(--color-brand);
    font-weight: 900;
}

.count-banner__share-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-left: auto;
    padding: 0.45rem 0.9rem;
    border: none;
    border-radius: 999px;
    background: var(--color-brand, #0ea5e9);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
    transition: transform 0.12s ease, background 0.15s ease, filter 0.15s ease;
}

.count-banner__share-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.count-banner__share-btn:active {
    transform: translateY(0);
}

.count-banner__share-btn i {
    font-size: 0.95rem;
}

.count-banner span {
    color: var(--color-brand);
    font-weight: 900;
}

.count-banner__share-btn .count-banner__share-label {
    color: #fff;
    font-weight: 800;
}

/* --- Game Grid & Cards --- */
.games-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ??????????????? card-mode??*/
.games-grid.card-mode {
    display: grid;
    grid-template-columns: repeat(var(--card-cols, 6), minmax(0, 1fr));
    gap: 12px;
}

.games-grid.card-mode .game-card {
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    height: 100%;
}

.games-grid.card-mode .card-img-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: none;
    margin: 0;
    border: none;
    border-bottom: 2px solid var(--text-main);
    border-radius: 0;
    flex-shrink: 0;
}

.games-grid.card-mode .card-info {
    padding: 10px;
}

.games-grid.card-mode .card-title {
    font-size: 0.95rem;
    line-height: 1.3;
}

.games-grid.card-mode .card-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.4;
    min-height: calc(1.4em * 2);
}
.games-grid.card-mode .card-expansions-pill {
    display: none;
}

.games-grid.card-mode .card-meta-row {
    margin-bottom: 0;
}

.games-grid.card-mode .meta-pill {
    font-size: 0.68rem;
    padding: 2px 6px;
}

.games-grid.card-mode .colony-card-admin-actions {
    margin-top: 4px;
}

.game-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--border-radius-lg);
    display: flex;
    padding: 1.25rem;
    position: relative;
    transition: all var(--transition-speed);
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(44, 34, 30, 0.04);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.game-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-flat);
    border-color: color-mix(in srgb, var(--color-brand) 35%, var(--border-soft));
}

.game-card.colony-card-just-saved {
    /* box-shadow ring ? does not change layout box (outline-offset caused ??) */
    box-shadow: 0 0 0 3px #22c55e, var(--shadow-flat);
    outline: none;
    transition: box-shadow 0.2s ease;
    animation: colonyJustSavedPulse 1.1s ease-in-out 2;
    z-index: 1;
}

@keyframes colonyJustSavedPulse {
    0%, 100% { box-shadow: 0 0 0 3px #22c55e, var(--shadow-flat); }
    50% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35), var(--shadow-flat); }
}

.games-grid.card-mode > .empty-state,
.games-grid.card-mode > .loading-state {
    grid-column: 1 / -1;
}

/* Left Image Box */
.card-img-wrapper {
    width: 140px;
    height: 140px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    flex-shrink: 0;
    border: 1.5px solid var(--border-color);
    position: relative;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-img--placeholder,
.detail-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2.5rem;
    background: var(--bg-surface);
    color:var(--text-muted);
}

.card-share-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    box-shadow: var(--shadow-flat);
}

/* ????????????????????????? */
.games-grid:not(.card-mode) .card-button-group.card-share-list-only {
    flex-shrink: 0;
    margin-left: auto;
    padding-top: 2px;
}

.games-grid:not(.card-mode) .card-title-row {
    align-items: flex-start;
}

/* Right Content Info */
.card-info {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.card-title-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1 1 auto;
}

.card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Bookmark / Share Action buttons inside Card */
.card-button-group {
    display: flex;
    gap: 0.35rem;
}

.card-action-btn {
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-family: var(--font-family);
    font-size: 0.72rem;
    font-weight: 700;
    border: 1.5px solid var(--border-color);
    color: #fff;
    cursor: pointer;
    transition: all var(--transition-speed);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.card-action-btn.btn-icon-only {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
}

.card-action-btn.btn-icon-only i {
    margin: 0;
    font-size: 0.85rem;
}

.card-action-btn:hover {
    transform: translateY(-1px);
}

.btn-card-bookmark {
    background-color: var(--color-accent-blue);
}

.btn-card-share {
    background-color: var(--color-brand);
    border-color: var(--text-main);
}

.btn-card-rate {
    background-color: #636e72;
}

/* ???????????????????????????????.card-action-btn ?????*/
.card-share-overlay {
    display: none !important;
}

.card-share-inline {
    display: inline-flex !important;
}

.games-grid.card-mode .card-share-overlay {
    display: inline-flex !important;
}

.games-grid.card-mode .card-share-inline,
.games-grid.card-mode .card-share-list-only {
    display: none !important;
}

/* Metadata pill badges */
.card-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}

.meta-pill {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--text-main);
    font-size: 0.75rem;
    font-weight: 700;
    background-color: var(--bg-surface);
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.meta-pill-price {
    background-color: var(--color-bg-price);
    color: var(--color-text-price);
    border-color: var(--border-color);
}

.category-outline-tag {
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    border: 1.5px solid var(--border-color);
    font-size: 0.75rem;
    font-weight: 700;
    background-color: transparent;
    color: var(--color-text-secondary);
}

.tag-plus-one {
    background-color: var(--color-bg-sidebar);
    color: var(--color-text-primary);
}

/* Description Text inside card */
.card-description {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.5rem;
}

/* Card Expansions Indicator */
.card-expansions-pill {
    align-self: flex-start;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    border: 1.5px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--color-accent-orange);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.card-expansions-pill:hover {
    background-color: #ffdcb9;
}

/* Card Edit/Delete ??????? pill ???????????? admin-only-btn??*/
.colony-card-admin-actions,
.game-card-title-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 4px;
}

.admin-only-btn {
    display: none !important;
    font-size: 13px;
    padding: 6px 12px;
    margin-left: 0;
    cursor: pointer;
    border-radius: 8px;
    border: 2px solid var(--text-main);
    font-weight: 900;
    box-shadow: var(--shadow-flat);
    transition: all 0.2s;
    align-items: center;
    gap: 4px;
}

.admin-only-btn.btn-icon-only {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    gap: 0;
}

.admin-only-btn.btn-icon-only i {
    margin: 0;
    font-size: 0.9rem;
}

body.colony-edit-mode.colony-admin-mode .admin-only-btn {
    display: inline-flex !important;
}

.edit-btn {
    background: #ffc107;
    color: var(--text-main);
}

.shelve-btn {
    background: #0ea5e9;
    color: #fff;
}

.delete-btn {
    background: #ef4444;
    color: #fff;
}

/* Edit-mode multi-select checkbox on card cover */
.colony-card-select {
    display: none !important;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: 8px;
    border: 2px solid var(--text-main);
    background: color-mix(in srgb, var(--card-bg) 95%, transparent);
    box-shadow: var(--shadow-flat);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

body.colony-edit-mode.colony-admin-mode .colony-card-select {
    display: inline-flex !important;
}

.colony-card-select input {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #0ea5e9;
}

.game-card.is-colony-selected {
    outline: 3px solid #0ea5e9;
    outline-offset: 2px;
}

/* ??????????????????????????????????? */
.card-actions {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 0.3rem;
    background: color-mix(in srgb, var(--card-bg) 90%, transparent);
    padding: 0.2rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    z-index: 2;
}

.btn-action-sm {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    transition: all var(--transition-speed);
}

.btn-action-edit {
    background: var(--color-accent-orange);
    color: #fff;
}

.btn-action-delete {
    background: #e74c3c;
    color: #fff;
}

.btn-action-sm:hover {
    transform: scale(1.1);
}

/* --- Modals CSS --- */
/* Modals must sit above remote / mobile FABs (those stay ?900). */
.modal {
    display: none;
    position: fixed;
    z-index: 2800;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(45, 52, 54, 0.62);
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: manipulation;
}

.modal.active > .modal-content {
    margin: 0;
    flex-shrink: 0;
    max-height: min(90vh, calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    contain: layout paint;
}

.modal-content {
    background-color: var(--card-bg);
    margin: 6% auto;
    padding: 2rem;
    border: 1px solid var(--border-soft);
    width: 90%;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 12px 32px rgba(44, 34, 30, 0.12), var(--shadow-flat);
    position: relative;
    animation: modalOpen var(--transition-speed) ease-out;
}

.modal-content-medium {
    max-width: 550px;
}

.modal-content-large {
    max-width: 850px;
}

@keyframes modalOpen {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.close-modal {
    color: var(--color-text-muted);
    float: right;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    transition: color var(--transition-speed);
    line-height: 1;
}

.close-modal:hover {
    color: var(--color-text-primary);
}

.modal h2 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-primary);
}

/* Form Styles inside Modals */
.form-group {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family);
    font-size: 0.85rem;
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
    outline: none;
    transition: all var(--transition-speed);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(31, 90, 133, 0.1);
}

.form-row {
    display: flex;
    gap: 0.75rem;
}

.form-row .form-group {
    flex: 1;
}

/* Modal Actions Layout */
.editor-actions, .settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(45, 52, 54, 0.1);
}

.btn {
    padding: 0.55rem 1.25rem;
    border-radius: var(--border-radius-sm);
    border: 1.5px solid var(--border-color);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-speed);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-primary {
    background-color: var(--primary-hover, #047857);
    color: #fff;
    border: 2px solid var(--primary-hover, #047857);
    border-radius: 999px;
    box-shadow: 2px 2px 0 rgba(4, 120, 87, 0.25);
}

.btn-primary:hover {
    background-color: #065f46;
    border-color: #065f46;
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 rgba(4, 120, 87, 0.28);
}

.btn-secondary {
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
    border-radius: 999px;
}

.btn-secondary:hover {
    background-color: var(--color-bg-sidebar);
}

.btn-danger {
    background-color: #e74c3c;
    color: #fff;
}

.btn-danger:hover {
    background-color: #c0392b;
}

/* Settings tab controls */
.settings-tabs {
    display: flex;
    border-bottom: 1.5px solid var(--border-color);
    margin-bottom: 1.25rem;
}

.settings-tabs .tab-btn {
    padding: 0.6rem 1.2rem;
    background: transparent;
    border: none;
    font-family: var(--font-family);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all var(--transition-speed);
}

.settings-tabs .tab-btn:hover {
    color: var(--color-text-primary);
}

.settings-tabs .tab-btn.active {
    color: var(--color-accent-blue);
    border-bottom-color: var(--color-accent-blue);
}

.settings-panes .settings-pane {
    display: none;
}

.settings-panes .settings-pane.active {
    display: block;
}

/* Drag drop area */
.drag-drop-zone {
    border: 2px dashed rgba(45, 52, 54, 0.3);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem;
    text-align: center;
    background-color: var(--color-bg-page);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.drop-icon {
    font-size: 2.5rem;
    color: var(--color-text-muted);
}

/* --- Detail View Modal Generating --- */
.detail-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
}

.detail-img-wrapper {
    width: 100%;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    border: var(--border-width-bold) solid var(--border-color);
}

.detail-img {
    width: 100%;
    height: auto;
    display: block;
}

.detail-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-name {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-text-primary);
}

.detail-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}

.detail-meta-item {
    background-color: var(--color-bg-sidebar);
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.4rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.detail-meta-item span {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    font-weight: 700;
}

.detail-meta-item strong {
    font-size: 0.88rem;
}

.detail-desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    background: var(--color-bg-sidebar);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-md);
    border: 1.5px solid var(--border-color);
}

.detail-section-title {
    font-size: 0.95rem;
    font-weight: 800;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.purchase-table, .expansions-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.25rem;
}

.purchase-table td, .expansions-table th, .expansions-table td {
    padding: 0.45rem 0.6rem;
    font-size: 0.8rem;
    border: 1px solid rgba(45, 52, 54, 0.15);
    text-align: left;
}

.purchase-table tr td:first-child {
    font-weight: 700;
    width: 130px;
    background-color: var(--color-bg-sidebar);
}

.expansions-table th {
    background-color: var(--color-bg-sidebar);
    font-weight: 700;
}

/* Loading States */
.loading-state, .empty-state {
    text-align: center;
    padding: 1.5rem 1.25rem;
    margin: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text-secondary);
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
}

.empty-icon {
    font-size: 3rem;
    color: var(--color-text-muted);
}

.empty-state--welcome .empty-icon {
    color: var(--color-accent-blue);
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.empty-state-hint {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 28rem;
    line-height: 1.5;
}

.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.colony-search-miss-sea-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    width: 100%;
    margin-bottom: 0.35rem;
}

.colony-search-miss-sea-btn {
    max-width: 100%;
    text-align: left;
    white-space: normal;
    line-height: 1.35;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid color-mix(in srgb, var(--color-brand) 12%, transparent);
    border-top: 4px solid var(--color-brand);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Media Queries for Mobile Responsive --- */
@media (max-width: 800px) {
    body.colony-has-sidebar {
        padding-left: 0 !important;
    }

    .app-container {
        flex-direction: column;
        max-width: 100%;
        overflow-x: hidden;
    }

    .colony-sticky-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.35rem;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 200;
        padding: 0.4rem max(0.5rem, env(safe-area-inset-right)) 0.4rem max(0.5rem, env(safe-area-inset-left));
        padding-top: max(0.4rem, env(safe-area-inset-top));
        background: var(--card-bg);
        border-bottom: 1px solid var(--border-soft);
        box-sizing: border-box;
    }

    .colony-sticky-bar .header-actions {
        gap: 0.35rem;
        flex-wrap: nowrap;
    }

    .colony-sticky-bar .colony-header-refresh-btn,
    .colony-sticky-bar .header-refresh-btn.colony-header-refresh-btn {
        padding: 0;
        width: 35px;
        min-width: 35px;
        height: 35px;
        border-radius: 10px;
    }

    .colony-sticky-bar .colony-header-refresh-btn .header-refresh-btn__label {
        display: none;
    }

    .colony-sticky-bar .btn-profile-login {
        padding: 0 0.65rem;
        min-width: 38px;
        justify-content: center;
    }

    .colony-sticky-bar .btn-profile-login .btn-login-label {
        display: none;
    }

    .colony-sticky-bar .btn-profile-login i {
        font-size: 1rem;
        margin: 0;
    }

    .colony-sticky-bar .user-profile-badge {
        max-width: none;
        padding: 0 0.35rem 0 0.2rem;
        min-width: 35px;
        height: 35px;
        border-radius: 20px;
    }

    .colony-sticky-bar .user-profile-badge .auth-btn-name {
        display: none !important;
    }

    .colony-sticky-bar .user-profile-badge .profile-avatar {
        width: 26px;
        height: 26px;
    }

    html:not(.tm-embedded) .sidebar {
        display: none !important;
    }

    .sidebar-game-list {
        display: none !important;
    }

    .main-content {
        padding: 0.75rem max(0.75rem, env(safe-area-inset-right)) 1.25rem max(0.75rem, env(safe-area-inset-left));
        max-width: 100%;
        width: 100%;
        overflow-x: visible;
    }

    .games-grid {
        padding: 0 1px;
        width: 100%;
        max-width: 100%;
    }

    .game-card {
        padding: 0.85rem;
        box-shadow: none;
        width: 100%;
        max-width: 100%;
    }

    .game-card:hover {
        transform: none;
        box-shadow: none;
    }

    .count-banner,
    .search-filter-row,
    .toolbar-row,
    .sub-pill-bar,
    .collapsible-filters-panel {
        max-width: 100%;
        box-sizing: border-box;
    }

    .card-meta-row {
        max-width: 100%;
    }

    .meta-pill {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .colony-card-admin-actions .admin-only-btn {
        max-width: 100%;
    }

    .main-header {
        display: none !important;
    }

    .colony-handoff-banner-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-colony-handoff-login {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .toolbar-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .toolbar-right,
    .toolbar-left {
        width: 100%;
    }

    .toolbar-right {
        order: -1;
    }

    .lib-switcher-card {
        max-width: none;
        width: 100%;
    }

    .lib-switcher-actions {
        grid-template-columns: repeat(3, 1fr);
    }

    .lib-selector-group {
        width: 100%;
        flex-wrap: wrap;
    }

    .lib-selector-group select {
        flex: 1;
        min-width: 0;
    }

    .ownerActions,
    #ownerActions {
        flex-wrap: wrap;
        width: 100%;
    }

    .search-filter-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .search-filter-row > .search-box-wrapper,
    .search-filter-row > .cabinet-filter-wrapper,
    .search-filter-row > .sort-wrapper,
    .search-filter-row > .filter-toggle-btn {
        width: auto;
        min-width: 0;
    }

    .search-filter-row > .search-box-wrapper {
        flex: 1 1 0;
        min-width: 0;
    }

    .search-filter-row > .cabinet-filter-wrapper {
        flex: 0 1 28%;
        min-width: 4.5rem;
        max-width: 34%;
    }

    .search-filter-row > .sort-wrapper {
        flex: 0 1 30%;
        min-width: 5rem;
        max-width: 38%;
    }

    .search-filter-row > .filter-toggle-btn {
        flex: 0 0 auto;
        padding: 0 0.65rem;
        min-width: 2.75rem;
        justify-content: center;
    }

    .search-filter-row > .search-box-wrapper input,
    .search-filter-row > .cabinet-filter-wrapper .cabinet-filter-trigger,
    .search-filter-row > .sort-wrapper .sort-menu-trigger,
    .search-filter-row > .filter-toggle-btn,
    .search-filter-row > .cabinet-filter-share-btn {
        height: 38px;
        font-size: 0.8rem;
    }

    .search-filter-row > .cabinet-filter-wrapper .cabinet-filter-trigger,
    .search-filter-row > .sort-wrapper .sort-menu-trigger {
        padding: 0 0.4rem 0 0.5rem;
    }

    .search-filter-row > .cabinet-filter-share-btn {
        flex: 0 0 auto;
        padding: 0 0.55rem;
        max-width: 42%;
    }

    .search-filter-row > .cabinet-filter-share-btn .cabinet-filter-share-label {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ??? fixed ? JS ?? trigger????? wrapper absolute */

    .search-filter-row > .colony-view-toolbar {
        order: 10;
        width: 100%;
        flex: 0 0 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.35rem;
        overflow-x: hidden;
        padding-top: 0.15rem;
        box-sizing: border-box;
    }

    .search-filter-row > .search-box-wrapper,
    .search-filter-row > .cabinet-filter-wrapper,
    .search-filter-row > .cabinet-filter-share-btn,
    .search-filter-row > .sort-wrapper,
    .search-filter-row > .filter-toggle-btn {
        order: 0;
    }

    /* ????????????????????????????? */
    .search-filter-row.is-search-expanded {
        position: sticky;
        top: 0;
        z-index: 80;
        overflow: visible;
        background: var(--color-bg-card, var(--card-bg, #fff));
        padding: 0.2rem 0 0.35rem;
        margin-left: -0.15rem;
        margin-right: -0.15rem;
        padding-left: 0.15rem;
        padding-right: 0.15rem;
    }
    .search-filter-row.is-search-expanded > .search-box-wrapper {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        order: -1 !important;
        position: relative;
        z-index: 6;
    }
    .search-filter-row.is-search-expanded > .search-box-wrapper input {
        font-size: 16px;
        height: 44px;
        padding-right: 2.5rem;
    }
    .search-filter-row.is-search-expanded > .cabinet-filter-wrapper,
    .search-filter-row.is-search-expanded > .sort-wrapper,
    .search-filter-row.is-search-expanded > .filter-toggle-btn,
    .search-filter-row.is-search-expanded > .cabinet-filter-share-btn {
        display: none !important;
    }

    .colony-view-mode-switch {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .colony-card-density-container {
        width: auto;
        flex: 1 1 148px;
        min-width: 0;
        max-width: 100%;
        justify-content: flex-end;
        border-left: none;
        padding: 0;
        margin-left: 0;
    }

    .colony-card-density-container:not([style*="display: none"]) {
        border-left: 1px solid #cbd5e1;
        padding-left: 0.5rem;
        margin-left: 0.25rem;
    }

    #colony-card-density-slider {
        flex: 1 1 auto;
        max-width: 88px;
        min-width: 48px;
    }

    .sub-pill-bar {
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }

    /* ???????????????????????????????????????????????????? */
    body {
        --colony-mobile-tabbar-offset: calc(3.75rem + env(safe-area-inset-bottom, 0px));
    }

    .main-content {
        padding-bottom: max(1.25rem, var(--colony-mobile-tabbar-offset, 0px));
    }

    .sub-pill-bar {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-width: 100%;
        z-index: 13050;
        margin-bottom: 0;
        justify-content: flex-start;
        background: color-mix(in srgb, var(--bg-main, #0f172a) 94%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid var(--border-soft, #334155);
        border-bottom: none;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.22);
        padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right));
    }

    .colony-remote-container {
        bottom: var(--colony-fab-base-bottom, var(--colony-tools-fab-bottom)) !important;
    }

    .colony-fab-back {
        bottom: var(--colony-fab-base-bottom, var(--colony-tools-fab-bottom)) !important;
    }

    #back-to-top {
        bottom: calc(var(--colony-mobile-tabbar-offset, 3.75rem) + 8px);
    }

    /* ????????????????????????? .sub-pill-bar */
    .colony-merchant-embed-shell .colony-merchant-subnav {
        display: none !important;
    }

    .game-card {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
    }

    /* ????????????????????????????*/
    .games-grid:not(.card-mode) .game-card {
        flex-direction: row;
        align-items: flex-start;
        padding: 0.85rem;
    }

    .games-grid:not(.card-mode) .card-img-wrapper {
        width: 80px;
        height: 80px;
        aspect-ratio: auto;
        max-width: none;
        margin: 0;
        flex-shrink: 0;
        border-radius: 12px;
        border: 2px solid var(--text-main);
    }

    .games-grid:not(.card-mode) .card-info {
        padding-left: 0.85rem;
        padding-top: 0;
        width: auto;
        flex: 1;
        min-width: 0;
    }

    .games-grid.card-mode .card-img-wrapper {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        max-width: 220px;
        margin: 0 auto;
    }

    .games-grid.card-mode .card-info {
        padding-left: 0;
        padding-top: 0.85rem;
        width: 100%;
    }

    .card-title-row {
        align-items: center;
    }

    .card-title {
        font-size: 1rem;
    }

    .card-meta-row {
        gap: 0.25rem;
    }

    .meta-pill {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

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

    .modal-content {
        margin: 4% auto;
        padding: 1.25rem;
        width: 94%;
    }

    .form-row {
        flex-direction: column;
    }
}

.guest-view-banner {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: #fff7ed;
    color: #9a3412;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: none;
}

.filter-toggle-btn,
.sort-menu-trigger,
.cabinet-filter-trigger,
.lib-switcher-card {
    box-shadow: 0 1px 0 rgba(44, 34, 30, 0.04);
}

.btn-secondary {
    background-color: var(--card-bg);
    color: var(--text-main);
    border: 2px solid var(--text-main);
    border-radius: 999px;
    box-shadow: 2px 2px 0 rgba(44, 34, 30, 0.18);
}

.btn-secondary:hover {
    background-color: var(--bg-surface);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 rgba(44, 34, 30, 0.22);
}

.settings-tabs .tab-btn.active {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
}

/* Toast：固定 overlay（預設底部，避免落在分頁 pill 列看起來像黑 tab） */
.colony-toast-root {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 28000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(92vw, 420px);
    pointer-events: none;
    /* 預設底部：避開頂部分頁／工具列 */
    top: auto;
    bottom: calc(var(--colony-fab-base-bottom, 24px) + var(--colony-tools-fab-size, 55px) + var(--colony-fab-gap, 14px) + 12px);
}

.colony-toast-root.colony-toast-root--bottom {
    top: auto;
    bottom: calc(var(--colony-fab-base-bottom, 24px) + var(--colony-tools-fab-size, 55px) + var(--colony-fab-gap, 14px) + 12px);
}

.colony-toast-root.colony-toast-root--top {
    top: max(16px, env(safe-area-inset-top, 0px));
    bottom: auto;
}

/* ???H??????C?Gtoast ?X?{?b?C?U??A??K??r?Q pills ??? */
@media (min-width: 801px) {
    .colony-toast-root:not(.colony-toast-root--top) {
        bottom: calc(var(--colony-fab-base-bottom, 24px) + var(--colony-tools-fab-size, 55px) + var(--colony-fab-gap, 14px) + 12px);
        top: auto;
    }
}

/* Merchant／內嵌：仍用底部，勿用 clearance-top 把 toast 塞進 pill 列 */
body.colony-merchant-embed-active .colony-toast-root:not(.colony-toast-root--top),
html.tm-embedded .colony-toast-root:not(.colony-toast-root--top),
body.colony-rules-embed-active .colony-toast-root:not(.colony-toast-root--top),
body.colony-village-chat-active .colony-toast-root:not(.colony-toast-root--top) {
    top: auto;
    bottom: calc(var(--colony-fab-base-bottom, 24px) + var(--colony-tools-fab-size, 55px) + var(--colony-fab-gap, 14px) + 12px);
}

.colony-toast {
    padding: 0.65rem 1rem;
    border-radius: 999px;
    border: none;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.colony-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.colony-toast-success {
    border: none;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    box-shadow: inset 3px 0 0 #34d399;
}

.colony-toast-error {
    border: none;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    box-shadow: inset 3px 0 0 #f87171;
}

.colony-toast-warn {
    border: none;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    box-shadow: inset 3px 0 0 #fbbf24;
}

.colony-toast-info {
    border: none;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    box-shadow: inset 3px 0 0 #6ee7b7;
}

@media (min-width: 901px) {
    .toolbar-right {
        flex-shrink: 0;
    }

    .lib-switcher-card {
        min-width: 340px;
    }
}

@media (min-width: 1100px) {
    .lib-switcher-card {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        max-width: 560px;
        padding: 0.55rem 0.65rem 0.55rem 0.75rem;
        gap: 0.5rem 0.65rem;
    }

    .lib-switcher-label {
        width: 100%;
        margin-bottom: -0.15rem;
    }

    .lib-switcher-main {
        flex: 1;
        min-width: 200px;
    }

    .lib-switcher-actions {
        display: flex;
        flex: 0 0 auto;
        gap: 0.35rem;
        width: auto;
    }

    .lib-action-btn {
        flex-direction: row;
        min-height: 38px;
        padding: 0.4rem 0.65rem;
        gap: 0.35rem;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .lib-action-btn i {
        font-size: 0.85rem;
    }
}

@media (max-width: 800px) {
    /* 手機：toast 在分頁列／FAB 之上（底部 overlay） */
    .colony-toast-root:not(.colony-toast-root--top) {
        top: auto;
        bottom: calc(
            var(--colony-mobile-tabbar-offset, 3.75rem)
            + var(--colony-tools-fab-size, 55px)
            + var(--colony-fab-gap, 14px)
            + 8px
            + env(safe-area-inset-bottom, 0px)
        );
    }

    body.colony-merchant-embed-active .colony-toast-root:not(.colony-toast-root--top),
    html.tm-embedded .colony-toast-root:not(.colony-toast-root--top),
    html.tm-embedded body.colony-merchant-embed-active .colony-toast-root:not(.colony-toast-root--top),
    body.colony-rules-embed-active .colony-toast-root:not(.colony-toast-root--top),
    body.colony-village-chat-active .colony-toast-root:not(.colony-toast-root--top) {
        top: auto;
        bottom: calc(
            var(--colony-mobile-tabbar-offset, 3.75rem)
            + var(--colony-tools-fab-size, 55px)
            + var(--colony-fab-gap, 14px)
            + 8px
            + env(safe-area-inset-bottom, 0px)
        );
    }

    html.tm-keyboard-open .colony-toast-root,
    body.tm-keyboard-open .colony-toast-root,
    html.tm-embedded.tm-keyboard-open .colony-toast-root,
    body:has(#colonyDrawClaimFormOverlay.active) .colony-toast-root,
    .colony-toast-root.colony-toast-root--top {
        top: max(16px, env(safe-area-inset-top, 0px)) !important;
        bottom: auto !important;
        z-index: 28000 !important;
    }
}

/* ??????? */
html.tm-embedded,
html.tm-embedded body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    overflow-x: hidden;
    max-width: 100%;
}

html.tm-embedded .app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

html.tm-embedded .colony-embed-lib-bar {
    flex-shrink: 0;
}

html.tm-embedded .main-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem 0;
    overflow: hidden;
    overflow-x: hidden;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

html.tm-embedded .count-banner {
    display: none !important;
}

html.tm-embedded .toolbar-row,
html.tm-embedded .search-filter-row,
html.tm-embedded .colony-announcement-banner,
html.tm-embedded .colony-embed-lib-bar {
    flex-shrink: 0;
}

html.tm-embedded #libraryView,
html.tm-embedded #lobbyView {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1.25rem;
}

@media (min-width: 801px) {
    html.tm-embedded body.colony-has-sidebar {
        padding-left: 180px;
    }

    html.tm-embedded body.colony-has-sidebar .sidebar {
        display: flex !important;
    }

    html.tm-embedded body:not(.colony-has-sidebar) .sidebar {
        display: none !important;
    }

    html.tm-embedded .main-content {
        max-width: none;
        width: 100%;
    }

    /* ???????????????????????? */
    body.colony-view-shelf,
    body.colony-view-shared {
        padding-left: 0 !important;
    }

    body.colony-view-shelf .sidebar,
    body.colony-view-shared .sidebar {
        display: none !important;
    }
}

@media (max-width: 800px) {
    html.tm-embedded body.colony-has-sidebar {
        padding-left: 0;
    }

    html.tm-embedded .sidebar {
        display: none !important;
    }
}
html.tm-embedded .main-header,
html.tm-embedded #tmEmbedNav,
html.tm-embedded .main-tabs {
    display: none !important;
}

/* ????????????? iframe ?????????????????????*/
html.tm-embedded .sub-pill-bar {
    display: flex !important;
    order: -1;
    position: sticky !important;
    top: 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    z-index: 220;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
    padding: 8px 10px;
    background: color-mix(in srgb, var(--bg-main, #0f172a) 94%, transparent);
}

html.tm-embedded .sub-pill-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 12px;
}

html.tm-embedded .app-container {
    display: flex;
    flex-direction: column;
}

html.tm-embedded .colony-embed-inline-subnav,
html.tm-embedded .colony-embed-inline-subnav:not([hidden]) {
    display: none !important;
}

html.tm-embedded .toolbar-row {
    padding-top: 0;
}
html.tm-embedded .search-filter-row {
    margin-top: 0;
}

html.tm-embedded {
    --colony-embed-fab-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    --colony-mobile-tabbar-offset: 0px;
}

@media (max-width: 800px) {
    /* ????????iframe ????? 80px??????????? */
    html.tm-embedded {
        --colony-mobile-tabbar-offset: calc(3.75rem + env(safe-area-inset-bottom, 0px));
        --colony-embed-fab-bottom: calc(var(--colony-mobile-tabbar-offset, 3.75rem) + 40px);
    }

    html.tm-embedded #libraryView,
    html.tm-embedded #lobbyView,
    html.tm-embedded .main-content {
        padding-bottom: max(1.25rem, var(--colony-mobile-tabbar-offset, 0px));
    }

    html.tm-embedded .sub-pill-bar {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 13050;
        border-radius: 14px 14px 0 0;
        border-bottom: none;
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
        padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right));
    }

}

/* ???????????????? sub-pill???????????????????? */
@media (max-width: 800px) {
    html.tm-keyboard-open .sub-pill-bar,
    body.tm-keyboard-open .sub-pill-bar,
    html.tm-embedded.tm-keyboard-open .sub-pill-bar,
    html.tm-embedded body.tm-keyboard-open .sub-pill-bar,
    html.tm-keyboard-open .colony-mpub-actions,
    body.tm-keyboard-open .colony-mpub-actions,
    html.tm-embedded.tm-keyboard-open .colony-mpub-actions,
    html.tm-embedded body.tm-keyboard-open .colony-mpub-actions,
    html.tm-keyboard-open .colony-dialog--claim-form .colony-dialog-actions,
    body.tm-keyboard-open .colony-dialog--claim-form .colony-dialog-actions,
    html.tm-embedded.tm-keyboard-open .colony-dialog--claim-form .colony-dialog-actions,
    html.tm-embedded body.tm-keyboard-open .colony-dialog--claim-form .colony-dialog-actions,
    html.tm-keyboard-open #colonyDrawClaimFormOverlay .colony-dialog-actions,
    body.tm-keyboard-open #colonyDrawClaimFormOverlay .colony-dialog-actions {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        opacity: 0 !important;
        transform: translateY(110%) !important;
    }

    html.tm-keyboard-open,
    body.tm-keyboard-open,
    html.tm-embedded.tm-keyboard-open,
    html.tm-embedded body.tm-keyboard-open {
        --colony-mobile-tabbar-offset: env(safe-area-inset-bottom, 0px);
    }

    html.tm-keyboard-open .main-content,
    body.tm-keyboard-open .main-content,
    html.tm-embedded.tm-keyboard-open #libraryView,
    html.tm-embedded.tm-keyboard-open #lobbyView,
    html.tm-embedded.tm-keyboard-open .main-content {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
    }
}

html.tm-embedded .games-grid,
html.tm-embedded .lobby-grid,
html.tm-embedded .lobby-view,
html.tm-embedded .search-filter-row,
html.tm-embedded .toolbar-row {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ?????????????????????????????????????????? */
html.tm-embedded .colony-sticky-bar {
    display: none !important;
}

html.tm-embedded #librarySection,
html.tm-embedded .lib-switcher-card {
    display: none !important;
}

html.tm-embedded .colony-embed-lib-bar {
    display: flex !important;
    position: static;
    z-index: 210;
}

html.tm-embedded .toolbar-row .toolbar-right {
    display: none;
}

.colony-embed-lib-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(44, 34, 30, 0.04);
    box-sizing: border-box;
}

.colony-embed-lib-bar-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    flex: 1 1 auto;
}

.colony-embed-lib-menu-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 2px solid var(--text-main);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-flat);
    transition: transform 0.15s ease, background 0.15s ease;
}

.colony-embed-lib-menu-btn:hover,
.colony-embed-lib-menu-btn[aria-expanded="true"] {
    background: var(--bg-surface);
    transform: translate(-1px, -1px);
}

.colony-embed-lib-title {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-brand);
    line-height: 1.2;
}

.colony-embed-lib-count {
    flex-shrink: 0;
    margin-left: 0.15rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: var(--bg-surface);
    border: 1px solid #e2e8f0;
    color:var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1.2;
}
.colony-embed-lib-count.is-clickable,
.count-banner.is-clickable {
    cursor: pointer;
}
.colony-embed-lib-count.is-clickable:hover {
    background: var(--border-soft);
    border-color: #cbd5e1;
}

.colony-embed-lib-count.is-near {
    background: var(--warn-bg);
    border-color: #fed7aa;
    color: #c2410c;
}

.colony-embed-lib-count.is-full {
    background: var(--danger-bg);
    border-color: #fecaca;
    color: #b91c1c;
}

.colony-embed-lib-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.colony-embed-lib-action-btn--sea {
    width: auto;
    min-width: 38px;
    height: 38px;
    padding: 0 0.65rem;
    border-radius: 999px;
    gap: 0.35rem;
    background: #e0f2fe;
    color: #0369a1;
    border: 1.5px solid #7dd3fc;
    font-weight: 700;
    font-size: 0.78rem;
}
.colony-embed-lib-action-btn--sea:hover {
    background: #bae6fd;
}
.colony-embed-lib-sea-label {
    white-space: nowrap;
}
@media (max-width: 420px) {
    .colony-embed-lib-action-btn--sea .colony-embed-lib-sea-label {
        display: none !important;
    }
    .colony-embed-lib-action-btn--sea {
        width: 38px;
        padding: 0;
        border-radius: 50%;
    }
}

/* ?????????????????????????? #tab-btn-embed-sea */
body.colony-view-shelf .colony-embed-lib-action-btn--sea {
    display: inline-flex !important;
}

.colony-embed-lib-action-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: #e0f2fe;
    color: #0369a1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: background 0.15s ease, transform 0.15s ease;
}

.colony-embed-lib-action-btn--share {
    background: var(--color-brand);
    color: #fff;
}

.colony-embed-lib-action-btn:hover {
    transform: scale(1.05);
}

.colony-embed-lib-action-btn--share:hover {
    background: var(--primary-hover);
}

.colony-embed-lib-picker {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(56px + env(safe-area-inset-top, 0px)) 0.75rem 1rem;
}

.colony-embed-lib-picker-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    background: rgba(15, 23, 42, 0.35);
    cursor: pointer;
}

.colony-embed-lib-picker-panel {
    position: relative;
    width: min(420px, 100%);
    max-height: min(70vh, 520px);
    overflow: auto;
    background: var(--card-bg);
    border: var(--border-width-bold) solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-flat-lg);
}

.colony-embed-lib-picker-list {
    display: flex;
    flex-direction: column;
    padding: 0.35rem;
}

.colony-embed-lib-picker-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text-main);
    font-family: var(--font-family);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.colony-embed-lib-picker-item:hover {
    background: var(--bg-surface);
}

.colony-embed-lib-picker-item.is-active {
    background: #e0f2fe;
    color: var(--color-brand);
}

.colony-embed-lib-picker-item i {
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
}

/* --- Colony FAB 欄（單一固定錨點 + flex 間距，禁止 AI／Tools／Share hit-area 重疊） ---
   底列：Share 左｜Tools 右（gap ≥14px）；上層：AI。safe-area／分頁列／村聚 sticky 只抬整欄 bottom。 */
html {
    --colony-fab-right: 20px;
    --colony-fab-gap: 14px;
    --colony-share-fab-size: 48px;
    --colony-tools-fab-size: 55px;
    --colony-ai-fab-size: 52px;
    --colony-fab-base-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    /* 相容舊變數名：tools bottom = 整欄底部 */
    --colony-tools-fab-bottom: var(--colony-fab-base-bottom);
    --colony-tools-fab-gap: var(--colony-fab-gap);
    /* AI 在整欄內由 flex 排，此變數僅給面板／未入欄時 fallback */
    --colony-ai-fab-bottom: calc(
        var(--colony-fab-base-bottom) + var(--colony-tools-fab-size) + var(--colony-fab-gap)
    );
}

.colony-embed-mobile-fabs {
    position: fixed;
    right: var(--colony-fab-right, 20px);
    bottom: var(--colony-fab-base-bottom, var(--colony-tools-fab-bottom));
    /* Under .modal (2800) so FAB never covers popup frames */
    z-index: 900;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: var(--colony-fab-gap, 14px);
    pointer-events: none;
}

.colony-embed-mobile-fabs > * {
    pointer-events: auto;
}

/* 底列：Share｜Tools 水平排列 */
.colony-fab-base-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--colony-fab-gap, 14px);
    pointer-events: none;
}

.colony-fab-base-row > * {
    pointer-events: auto;
}

.colony-fab-share {
    width: var(--colony-share-fab-size, 48px);
    height: var(--colony-share-fab-size, 48px);
    border: 2px solid var(--text-main);
    border-radius: 16px;
    background: var(--color-brand);
    color: #fff;
    box-shadow: var(--shadow-flat-lg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.15s ease, background 0.15s ease;
}

.colony-fab-share[hidden] {
    display: none !important;
}

.colony-fab-share:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.colony-fab-share i {
    font-size: 1.15rem;
    line-height: 1;
}

@media (max-width: 800px) {
    html.tm-embedded {
        --colony-mobile-tabbar-offset: 120px;
        --colony-embed-fab-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
        --colony-fab-base-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
        --colony-tools-fab-bottom: var(--colony-fab-base-bottom);
        --colony-ai-fab-bottom: calc(
            var(--colony-fab-base-bottom) + var(--colony-tools-fab-size) + var(--colony-fab-gap)
        );
    }

    html:not(.tm-embedded) {
        --colony-fab-base-bottom: calc(var(--colony-mobile-tabbar-offset, 3.75rem) + 40px);
        --colony-tools-fab-bottom: var(--colony-fab-base-bottom);
        --colony-ai-fab-bottom: calc(
            var(--colony-fab-base-bottom) + var(--colony-tools-fab-size) + var(--colony-fab-gap)
        );
    }

    html.tm-embedded .colony-embed-mobile-fabs,
    html:not(.tm-embedded) .colony-embed-mobile-fabs {
        bottom: var(--colony-fab-base-bottom) !important;
        right: 16px;
    }

    #back-to-top {
        bottom: calc(var(--colony-mobile-tabbar-offset, 3.75rem) + 40px) !important;
    }
}

/* 遙控器永遠待在 FAB 欄內（embed／standalone 皆 static），由欄位統一 fixed */
.colony-embed-mobile-fabs .colony-remote-container,
html.tm-embedded .colony-remote-container,
html:not(.tm-embedded) .colony-embed-mobile-fabs .colony-remote-container {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    z-index: auto;
}

.colony-embed-inline-subnav {
    display: none;
    position: relative;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}

.colony-embed-inline-subnav:not([hidden]) {
    display: flex;
}

.colony-embed-inline-subnav-fab {
    width: 48px;
    height: 48px;
    border: 2px solid var(--text-main);
    border-radius: 14px;
    background: var(--color-brand);
    color: #fff;
    box-shadow: var(--shadow-flat-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
    transform: none;
}

.colony-embed-inline-subnav-fab svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.colony-embed-inline-subnav-fab:hover,
.colony-embed-inline-subnav.is-open .colony-embed-inline-subnav-fab {
    background: var(--primary-hover);
    transform: none;
}

.colony-embed-inline-subnav-stack {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 148px;
    z-index: 2;
}

.colony-embed-inline-subnav.is-open .colony-embed-inline-subnav-stack {
    display: flex;
}

.colony-embed-inline-subnav-item {
    border: 2px solid var(--text-main);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-main);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-flat);
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease;
}

.colony-embed-inline-subnav-item:hover {
    background: var(--bg-surface);
    transform: translate(-1px, -1px);
}

.colony-embed-inline-subnav-item.is-active {
    background: #e0f2fe;
    color: var(--color-brand);
}

.colony-remote-container {
    position: fixed;
    bottom: var(--colony-fab-base-bottom, var(--colony-tools-fab-bottom));
    right: var(--colony-fab-right, 20px);
    /* Under .modal (2800) so FAB never covers popup frames */
    z-index: 900;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: var(--colony-fab-gap, 14px);
}

/* 聚落頁：AI 進入 FAB 欄後改由 flex 堆疊；未入欄時仍用變數抬高 */
body[data-tm-assist="colony"] .tm-mate-fab {
    right: var(--colony-fab-right, 20px);
    bottom: var(--colony-ai-fab-bottom);
    z-index: 920;
}

/* 已掛入 #colony-embed-mobile-fabs：取消 fixed，交給欄位垂直排列（保證與 Tools／Share 不重疊） */
.colony-embed-mobile-fabs > .tm-mate-fab,
body[data-tm-assist="colony"] .colony-embed-mobile-fabs > .tm-mate-fab {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 2;
    flex-shrink: 0;
    /* 對齊底列 Tools 右緣（Tools 55 vs AI 52） */
    margin-right: calc((var(--colony-tools-fab-size, 55px) - var(--colony-ai-fab-size, 52px)) / 2);
}

body[data-tm-assist="colony"] .tm-mate-panel {
    right: 16px;
    bottom: calc(var(--colony-ai-fab-bottom) + var(--colony-ai-fab-size) + var(--colony-fab-gap, 14px));
}

@media (max-width: 640px) {
    body[data-tm-assist="colony"] .tm-mate-fab {
        right: 16px;
        bottom: var(--colony-ai-fab-bottom);
    }
    body[data-tm-assist="colony"] .colony-embed-mobile-fabs > .tm-mate-fab {
        right: auto !important;
        bottom: auto !important;
    }
    body[data-tm-assist="colony"] .tm-mate-panel {
        right: 8px;
        left: 8px;
        width: auto;
        bottom: calc(var(--colony-ai-fab-bottom) + var(--colony-ai-fab-size) + var(--colony-fab-gap, 14px));
    }
}

/* --- ??? / ????????????? --- */
.colony-mobile-fab {
    position: fixed;
    z-index: 890;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 2px solid var(--text-main);
    background: var(--card-bg);
    color: var(--text-main);
    box-shadow: 3px 3px 0 rgba(44, 34, 30, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease, box-shadow 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.colony-mobile-fab.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.colony-mobile-fab:hover {
    background: var(--bg-surface, #f8fafc);
    transform: translateY(-2px);
}

.colony-mobile-fab:active {
    transform: translateY(0);
}

.colony-fab-back {
    left: 20px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--primary-hover, #047857);
    border-color: #065f46;
    color: #fff;
}

.colony-fab-back:hover {
    background: #065f46;
    color: #fff;
}

/* back-to-top */
#back-to-top {
    display: none;
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 45px;
    background: color-mix(in srgb, var(--color-brand) 85%, transparent);
    color: white;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10100;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: 0.3s;
    pointer-events: auto;
}

#back-to-top:hover {
    background: rgba(31, 90, 133, 1);
    transform: translateX(-50%) scale(1.1);
}

.colony-remote-main-fab-host {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.colony-remote-default-star {
    width: 28px;
    height: 28px;
    border: 2px solid var(--text-main);
    border-radius: 8px;
    background: var(--warn-bg);
    color:var(--text-muted);
    box-shadow: var(--shadow-flat);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.82rem;
    flex-shrink: 0;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.colony-remote-default-star:hover {
    transform: scale(1.08);
    background: var(--warn-bg);
}

.colony-remote-default-star.is-default {
    background: #fbbf24;
    color: #fff;
    border-color: #b45309;
}

.colony-remote-default-star.is-default i {
    color: #fff;
}

.colony-remote-main-fab {
    background: var(--color-brand);
    color: white;
    border: 2px solid var(--text-main);
    border-radius: 18px;
    width: 55px;
    height: 55px;
    cursor: pointer;
    box-shadow: var(--shadow-flat-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    padding: 0;
}

.colony-remote-fab-icon {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.colony-remote-fab-fa {
    font-size: 1.35rem;
    line-height: 1;
}

.colony-remote-fab-close {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}

.colony-remote-sub-buttons {
    flex-direction: column;
    animation: colonyRemoteSlideUp 0.3s ease;
}

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

.remote-control-panel,
.remote-control-panel * {
    box-sizing: border-box;
}

.remote-control-panel {
    position: relative;
    background: color-mix(in srgb, var(--card-bg, #1e293b) 96%, transparent);
    border: 3px solid var(--text-main);
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), var(--shadow-flat-lg);
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(320px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    margin-bottom: 5px;
    min-width: 0;
}

@media (min-width: 901px) {
    .remote-control-panel {
        background: color-mix(in srgb, var(--card-bg, #1e293b) 95%, transparent);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

.remote-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.colony-remote-panel-title {
    font-size: 11px;
    color:var(--text-muted);
    font-weight: bold;
}

.colony-remote-section-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.colony-remote-section-tabs--scroll {
    flex-wrap: nowrap;
    padding-bottom: 2px;
}

.colony-remote-section-tabs--scroll::-webkit-scrollbar {
    display: none;
}

.colony-remote-section-tab {
    flex: 1 0 auto;
    min-width: 3.2rem;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: var(--bg-surface);
    color:var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.colony-remote-section-tab:hover {
    background: var(--bg-surface);
    color:var(--text-main);
}

.colony-remote-section-tab.active {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
}

.colony-remote-section-tab--merchant.active {
    background: var(--warn-bg);
    border-color: #fcd34d;
    color: #b45309;
}

.colony-remote-section-tab--members.active {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
}

.colony-remote-section-tab--permissions.active {
    background: var(--warn-bg);
    border-color: #fcd34d;
    color: #b45309;
}

.colony-remote-section-tab--chat.active {
    background: #ede9fe;
    border-color: #c4b5fd;
    color: #7c3aed;
}

.colony-contrib-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.colony-contrib-table th,
.colony-contrib-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}

.colony-contrib-table th {
    color:var(--text-muted);
    font-weight: 700;
    font-size: 11px;
}

.colony-contributions-body {
    max-height: 50vh;
    overflow: auto;
}

.colony-remote-section-hint {
    margin: 0 0 10px;
    font-size: 11px;
    color:var(--text-muted);
    line-height: 1.35;
}

.remote-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.remote-grid-slot {
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    aspect-ratio: 1 / 1;
}

.remote-grid-slot--empty {
    border: 2px dashed #e2e8f0;
    border-radius: 16px;
    background: var(--bg-surface);
}

.remote-grid-slot .remote-btn {
    width: 100%;
    height: 100%;
    max-width: 100%;
}

.remote-page-indicator {
    font-size: 11px;
    color:var(--text-muted);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.remote-pager-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 2px;
    padding: 0 2px;
}

.remote-pager-arrows {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.remote-pager-arrow {
    width: 36px;
    height: 36px;
    border: 2px solid var(--text-main);
    border-radius: 12px;
    background: var(--card-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color:var(--text-muted);
    box-shadow: var(--shadow-flat);
    transition: transform 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.remote-pager-arrow svg {
    width: 18px;
    height: 18px;
}

.remote-pager-arrow:hover:not(:disabled) {
    transform: translateY(-1px);
    background: var(--bg-surface);
}

.remote-pager-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.remote-drag-hint {
    margin: 2px 0 0;
    font-size: 10px;
    color:var(--text-muted);
    text-align: center;
    white-space: normal;
    line-height: 1.35;
    word-break: break-word;
}

body.remote-drag-active {
    user-select: none;
    -webkit-user-select: none;
}

body.remote-drag-active .remote-btn {
    pointer-events: none;
}

.remote-btn--ghost {
    opacity: 1 !important;
    transform: scale(1.1) rotate(-2deg);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.28), 0 4px 10px rgba(15, 23, 42, 0.12);
    cursor: grabbing;
}

.remote-btn--placeholder {
    opacity: 0.2 !important;
    transform: scale(0.9) !important;
    box-shadow: none !important;
    filter: grayscale(0.35);
}

.remote-slot--dragging {
    background: var(--warn-bg);
    border-radius: 16px;
}

.remote-slot--drop-target {
    outline: 4px solid #ea580c;
    outline-offset: -2px;
    border-radius: 16px;
    background: linear-gradient(145deg, #fffbeb 0%, #fde68a 100%);
    box-shadow: inset 0 0 0 2px #f59e0b, 0 0 12px rgba(245, 158, 11, 0.45);
}

#colony-remote-grid-pager,
#colony-remote-grid-pages,
.remote-grid-page {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.remote-control-panel.remote-edge-prev::before,
.remote-control-panel.remote-edge-next::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    z-index: 5;
}

.remote-control-panel.remote-edge-prev::before {
    left: -32px;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.35), transparent);
}

.remote-control-panel.remote-edge-next::after {
    right: -32px;
    background: linear-gradient(270deg, rgba(245, 158, 11, 0.35), transparent);
}

#colony-remote-btn-pool {
    display: none !important;
}

.remote-btn-text--compact {
    font-size: 10px !important;
    line-height: 1.15 !important;
}

body.colony-remote-open #colony-remote-sub-buttons .remote-control-panel {
    /* Keep remote panel under modals (2800) */
    z-index: 950;
}

/* Hide remote FAB while add/edit game editor is open */
body.colony-editor-open .colony-remote-container,
body.colony-editor-open #colony-embed-mobile-fabs {
    display: none !important;
}

/* Floating save ? same corner as remote FAB; above editor modal */
.colony-editor-save-fab {
    position: fixed;
    right: 20px;
    bottom: var(--colony-tools-fab-bottom, calc(24px + env(safe-area-inset-bottom, 0px)));
    z-index: 3100;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    border: 2px solid var(--text-main);
    background: #22c55e;
    color: #fff;
    box-shadow: var(--shadow-flat-lg);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.15rem;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}

body.colony-editor-open .colony-editor-save-fab {
    display: flex;
}

.colony-editor-save-fab:hover {
    background: #16a34a;
    transform: translateY(-2px);
}

.colony-editor-save-fab:active {
    transform: translateY(0);
}

@media (max-width: 800px) {
    html.tm-embedded body.colony-editor-open .colony-editor-save-fab,
    html:not(.tm-embedded) body.colony-editor-open .colony-editor-save-fab {
        bottom: var(--colony-tools-fab-bottom) !important;
    }
}

/* Quick shelve modal */
.colony-shelve-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.colony-shelve-count {
    font-size: 0.9rem;
    color:var(--text-muted);
    margin: 0;
}

.colony-shelve-tabs {
    display: flex;
    gap: 0.5rem;
}

.colony-shelve-tab {
    flex: 1;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: var(--bg-surface);
    font-weight: 800;
    cursor: pointer;
    color:var(--text-main);
}

.colony-shelve-tab.is-active {
    border-color: #0ea5e9;
    background: #e0f2fe;
    color: #0369a1;
}

.colony-shelve-pane {
    display: none;
    flex-direction: column;
    gap: 0.65rem;
}

.colony-shelve-pane.is-active {
    display: flex;
}

.colony-shelve-pane label {
    font-weight: 700;
    font-size: 0.85rem;
    color:var(--text-main);
}

.colony-shelve-pane input,
.colony-shelve-pane select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    font-size: 0.95rem;
}

.colony-shelve-cab-picker {
    display: flex;
    flex-direction: column;
}

.colony-shelve-cab-picker.is-creating select {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.colony-shelve-virtual-create {
    display: none;
}

.colony-shelve-cab-picker.is-creating .colony-shelve-virtual-create {
    display: block;
}

.colony-shelve-virtual-create[hidden] {
    display: none !important;
}

.colony-shelve-virtual-create input {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-width: 1px;
    border-top-style: dashed;
}

.colony-shelve-hint {
    font-size: 0.8rem;
    color:var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.colony-shelve-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.lib-settings-current-name {
    font-size: 1.15rem;
    font-weight: 900;
    color:var(--text-main);
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    background: var(--bg-surface);
    border: 2px solid #e2e8f0;
    margin-bottom: 0.5rem;
    word-break: break-word;
}

.lib-settings-rename-btn {
    margin-bottom: 0.35rem;
}

.colony-notification-bell-wrap {
    position: relative;
    overflow: visible;
}

.colony-notification-bell-btn {
    display: none;
}

.notification-bell-wrap .notification-bell-btn,
.colony-notification-bell-btn {
    position: relative;
    width: 35px;
    height: 35px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid #cbd5e1;
    cursor: pointer;
    align-items: center;
    color:var(--text-muted);
}

.notification-badge {
    display: none;
    position: absolute;
    top: -3px;
    right: -3px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.colony-notification-dropdown {
    position: absolute;
    top: 45px;
    right: 0;
    width: min(320px, calc(100vw - 24px));
    max-height: min(420px, 70vh);
    background: var(--card-bg);
    border: 2px solid #0f172a;
    border-radius: 14px;
    box-shadow: 6px 6px 0 #0f172a;
    display: none;
    flex-direction: column;
    z-index: 14000;
    overflow: hidden;
}

body.colony-notification-center-open {
    overflow: hidden;
}

.notification-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid #e2e8f0;
}

.notification-dropdown__title {
    font-size: 0.9rem;
    font-weight: 800;
    color:var(--text-main);
}

.notification-dropdown__mark-all {
    border: none;
    background: none;
    color: #0369a1;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.notification-list-container {
    overflow-y: auto;
    max-height: 360px;
}

.notification-item {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
}

.notification-item:hover {
    background: var(--bg-surface);
}

.notification-item.is-unread {
    background: var(--info-bg);
}

.notification-item__title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 800;
    font-size: 0.85rem;
    color:var(--text-main);
}

.notification-item__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0ea5e9;
    flex-shrink: 0;
}

.notification-item__body {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color:var(--text-muted);
    line-height: 1.4;
}

.notification-item__time {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    color:var(--text-muted);
}

.notification-empty {
    padding: 2rem 1rem;
    text-align: center;
    color:var(--text-muted);
    font-size: 0.85rem;
}

.notification-dropdown-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 11999;
}

.colony-notify-prefs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 12px;
    background: var(--ok-bg);
    border: 1px solid #6ee7b7;
}

.colony-notify-pref-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    font-size: 0.92rem;
}

.colony-notify-merchant-section {
    margin-top: 0.35rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #6ee7b7;
}

.colony-notify-merchant-heading {
    font-size: 0.78rem;
    font-weight: 800;
    color: #b45309;
    margin-bottom: 0.35rem;
}

.lib-settings-remote-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

.lib-settings-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-surface);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

.lib-settings-toggle-row input {
    width: 18px;
    height: 18px;
}

.lib-settings-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lib-settings-field label {
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--text-main);
}

.lib-settings-text-input {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    padding: 0 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-family: var(--font-family);
    font-size: 0.9rem;
    background: var(--card-bg);
}

.lib-settings-text-input:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(31, 90, 133, 0.12);
}

.lib-settings-text-input:disabled {
    opacity: 0.65;
    background: var(--bg-surface);
}

.lib-settings-field-hint {
    margin: 0;
    font-size: 0.78rem;
    color:var(--text-muted);
    line-height: 1.4;
}

.lib-settings-cover-field {
    gap: 0.5rem;
}

.lib-settings-cover-preview-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--border-color);
    background: var(--bg-surface);
}

.lib-settings-cover-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lib-settings-cover-preview-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color:var(--text-muted);
    font-size: 2rem;
}

.lib-settings-cover-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.lib-settings-cover-row .lib-settings-text-input {
    flex: 1 1 auto;
    min-width: 0;
}

.lib-settings-cover-upload-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    background: var(--bg-surface);
    color:var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
}

.lib-settings-cover-upload-btn:hover:not(:disabled) {
    background: var(--border-soft);
}

.lib-settings-cover-upload-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.edit-image-preview-wrap {
    position: relative;
    margin: 0 0 0.5rem;
    width: 88px;
    height: 88px;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--border-color);
    background: var(--bg-surface);
}

.edit-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.edit-image-preview-wrap[data-state="loading"] .edit-image-preview {
    opacity: 0.25;
}

.edit-image-preview-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(248, 250, 252, 0.92);
    color:var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    z-index: 1;
}

.edit-image-preview-loading[hidden] {
    display: none !important;
}

.edit-image-preview-loading i {
    font-size: 1.1rem;
    color: #3b82f6;
}

.card-img-wrapper.is-cover-loading {
    position: relative;
}

.card-img-wrapper.is-cover-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(248, 250, 252, 0.75);
    z-index: 2;
    pointer-events: none;
}

.card-img-cover-spinner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    font-size: 1.25rem;
    pointer-events: none;
}

.card-img-wrapper.is-cover-loading .card-img-cover-spinner {
    display: flex;
}

.edit-image-drive-btn {
    padding: 0;
}

.edit-image-drive-btn .tm-drive-icon {
    display: block;
}

.lib-settings-cover-clear {
    align-self: flex-start;
}

.detail-rules-hint {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color:var(--text-muted);
    line-height: 1.4;
    text-align: center;
}

.colony-merchant-toggle-row {
    margin-bottom: 0.35rem;
}

.colony-merchant-form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
}

.lib-settings-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 64px;
    padding: 0.55rem 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-family: var(--font-family);
    font-size: 0.9rem;
    resize: vertical;
    background: var(--card-bg);
}

.colony-merchant-hours-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    font-weight: 700;
}

.colony-merchant-time {
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 0.35rem 0.5rem;
    font-family: var(--font-family);
}

.colony-merchant-days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.colony-merchant-day-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0.45rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    background: var(--bg-surface);
}

.colony-merchant-day-chip:has(input:checked) {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #047857;
}

.colony-merchant-public-card {
    padding: 0.85rem;
    border: 2px solid #fde68a;
    border-radius: 14px;
    background: var(--warn-bg);
    margin-bottom: 0.75rem;
}

.colony-merchant-public-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: #b45309;
}

.colony-merchant-public-meta {
    margin: 0.2rem 0;
    font-size: 0.85rem;
    color:var(--text-muted);
}

.colony-merchant-public-desc {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color:var(--text-muted);
    line-height: 1.45;
}

.colony-required {
    color: #ef4444;
}

.colony-merchant-modal-content {
    width: min(550px, calc(100vw - 2rem));
}

.colony-address-map-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.colony-address-map-row .lib-settings-text-input {
    flex: 1;
    min-width: 0;
}

.colony-map-pick-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
}

.colony-merchant-map-preview {
    display: none;
    width: 100%;
    height: 180px;
    margin-top: 10px;
    border-radius: 12px;
    border: 2px solid var(--text-main);
    overflow: hidden;
    box-shadow: var(--shadow-flat);
}

.colony-field-hint {
    font-size: 11px;
    color:var(--text-muted);
    margin: 6px 0 0;
    line-height: 1.45;
}

.colony-map-picker-modal {
    z-index: 13000 !important;
}

.colony-map-picker-modal.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.colony-map-picker-container {
    width: 100%;
    height: 280px;
    border-radius: 12px;
    border: 2px solid var(--text-main);
    margin: 0;
    overflow: hidden;
}

.colony-map-picker-map-wrap {
    position: relative;
    margin: 12px 0;
}

.colony-map-picker-locate-fab {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1.5px solid #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.18);
}

.colony-map-picker-locate-fab:hover {
    background: #dbeafe;
}

.colony-map-picker-locate-fab.is-loading {
    opacity: 0.65;
    pointer-events: none;
}

.colony-map-picker-search-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.colony-map-picker-search-row .lib-settings-text-input {
    flex: 1;
}

.colony-map-picker-selected {
    font-size: 13px;
    background: var(--bg-surface);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    line-height: 1.5;
}

.colony-map-picker-selected span {
    color:var(--text-muted);
    word-break: break-word;
}

body.colony-map-picker-active {
    overflow: hidden;
}

.merchant-section-title {
    font-size: 13px;
    font-weight: 800;
    color:var(--text-main);
    margin-bottom: 8px;
}

.merchant-block-hint {
    font-size: 11px;
    color: #92400e;
    margin: 0 0 10px;
    line-height: 1.45;
}

.merchant-rule-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.merchant-rule-card {
    background: var(--card-bg);
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: 10px;
}

.merchant-pricing-block .merchant-rule-card {
    border-color: #e2e8f0;
}

.merchant-rule-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.merchant-rule-card-title {
    font-size: 12px;
    font-weight: 800;
    color: #78350f;
}

.merchant-pricing-block .merchant-rule-card-title {
    color:var(--text-main);
}

.merchant-rule-remove {
    border: none;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.merchant-add-btn {
    width: 100%;
    border: 2px dashed #fbbf24;
    background: var(--card-bg);
    color: #b45309;
    border-radius: 10px;
    padding: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    margin-bottom: 10px;
}

.merchant-add-btn--pricing {
    border-color: #cbd5e1;
    color:var(--text-muted);
}

.merchant-schedule-block,
.merchant-pricing-block {
    background: var(--warn-bg);
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}

.merchant-pricing-block {
    background: var(--bg-surface);
    border-color: #e2e8f0;
}

.merchant-preset-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.merchant-preset-label {
    font-size: 11px;
    color: #92400e;
    font-weight: 700;
}

.merchant-preset-btn {
    border: 1px solid #fcd34d;
    background: var(--card-bg);
    color: #b45309;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.merchant-weekday-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.merchant-day-btn {
    min-width: 36px;
    height: 36px;
    border: 2px solid #fcd34d;
    border-radius: 10px;
    background: var(--card-bg);
    color: #92400e;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.merchant-day-btn.is-active {
    background: #f59e0b;
    border-color: #d97706;
    color: white;
}

.merchant-time-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 10px;
}

.merchant-time-field {
    flex: 1;
    min-width: 0;
}

.merchant-time-label {
    display: block;
    font-size: 11px;
    color: #92400e;
    font-weight: 700;
    margin-bottom: 3px;
}

.merchant-time-sep {
    font-size: 12px;
    color: #b45309;
    font-weight: 700;
    padding-bottom: 10px;
}

.merchant-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #78350f;
    font-weight: 600;
    cursor: pointer;
}

.merchant-amenities-block {
    margin: 4px 0 12px;
    padding: 12px;
    border: 1px solid var(--border-soft, #e2e8f0);
    border-radius: 10px;
    background: var(--bg-surface, #f8fafc);
}

.merchant-amenities-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 10px;
}

.merchant-amenities-grid .merchant-check-label {
    color: var(--text-main, #0f172a);
    min-width: 120px;
}

.merchant-amenity-drink-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    transition: opacity 0.15s;
}

.merchant-amenities-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 2px;
}

.merchant-amenity-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #0f766e;
    background: #ecfdf5;
    border: 1px solid #99f6e4;
}

.merchant-hours-preview {
    font-size: 12px;
    color: #065f46;
    background: #ecfdf5;
    border: 1px dashed #6ee7b7;
    border-radius: 8px;
    padding: 8px 10px;
    line-height: 1.5;
}

.merchant-hours-preview.is-empty {
    color:var(--text-muted);
    background: var(--bg-surface);
    border-color: #e2e8f0;
}

.merchant-pricing-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.merchant-pricing-row--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.merchant-field-label {
    display: block;
    font-size: 10px;
    color:var(--text-muted);
    font-weight: 700;
    margin-bottom: 3px;
}

.merchant-daytype-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    box-sizing: border-box;
    background: var(--card-bg);
}

.merchant-price-unit-wrap {
    display: flex;
    align-items: flex-end;
    padding-bottom: 10px;
}

.merchant-price-unit {
    font-size: 11px;
    color:var(--text-muted);
    white-space: nowrap;
    font-weight: 600;
}

.merchant-preview-section {
    margin-top: 16px;
    padding: 14px;
    background: var(--bg-surface);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 12px;
}

.merchant-preview-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.merchant-preview-tab {
    flex: 1;
    border: 1px solid #cbd5e1;
    background: var(--card-bg);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    color:var(--text-muted);
    cursor: pointer;
}

.merchant-preview-tab.is-active {
    background: #0ea5e9;
    border-color: #0284c7;
    color: white;
}

.merchant-preview-panel {
    overflow-x: auto;
    content-visibility: auto;
    contain-intrinsic-size: 120px;
}

.merchant-preview-panel[style*="display: none"] {
    content-visibility: hidden;
}

.merchant-preview-card {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #e2e8f0;
}

.merchant-preview-shop-name {
    font-size: 16px;
    font-weight: 800;
    color: #b45309;
    margin-bottom: 6px;
}

.merchant-preview-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color:var(--text-muted);
    margin-bottom: 8px;
}

.merchant-preview-desc {
    font-size: 12px;
    color:var(--text-muted);
    line-height: 1.45;
    margin: 0 0 10px;
}

.merchant-preview-subtitle {
    font-size: 11px;
    font-weight: 800;
    color:var(--text-main);
    margin: 10px 0 6px;
}

.merchant-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.merchant-preview-table th,
.merchant-preview-table td {
    border: 1px solid #e2e8f0;
    padding: 6px 8px;
    text-align: left;
}

.merchant-preview-table th {
    background: var(--bg-surface);
    font-weight: 700;
}

.merchant-preview-empty {
    color:var(--text-muted);
    font-size: 12px;
}

.merchant-preview-hint {
    font-size: 10px;
    color:var(--text-muted);
    margin: 8px 0 0;
    line-height: 1.4;
}

.merchant-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.merchant-week-cell {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 6px;
    min-height: 72px;
    background: var(--bg-surface);
    font-size: 11px;
}

.merchant-week-cell.is-open {
    background: var(--warn-bg);
    border-color: #fde68a;
}

.merchant-week-day {
    font-weight: 800;
    color: #92400e;
    text-align: center;
    margin-bottom: 6px;
    font-size: 12px;
}

.merchant-week-slot {
    color:var(--text-main);
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 2px;
}

.merchant-week-national {
    display: block;
    font-size: 10px;
    color: #b45309;
    font-weight: 700;
}

.merchant-week-prices {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #fde68a;
}

.merchant-week-price {
    color: #0369a1;
    font-size: 10px;
    line-height: 1.35;
}

.merchant-week-closed {
    text-align: center;
    color:var(--text-muted);
    padding-top: 12px;
    font-weight: 600;
}

.colony-announcement-banner {
    margin: 0 0 10px;
}

.colony-announcement-banner-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    cursor: pointer;
    text-align: left;
}

.colony-announcement-banner-icon {
    color: #b45309;
    font-size: 18px;
    flex-shrink: 0;
}

.colony-announcement-banner-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.colony-announcement-banner-label {
    font-size: 11px;
    font-weight: 800;
    color: #b45309;
}

.colony-announcement-banner-text {
    font-size: 13px;
    font-weight: 600;
    color:var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.colony-announcement-banner-meta {
    font-size: 10px;
    color:var(--text-muted);
}

.colony-announcement-banner-chevron {
    color: #b45309;
    flex-shrink: 0;
}

.colony-announcements-post {
    margin-bottom: 14px;
}

.colony-announcements-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 50vh;
    overflow-y: auto;
}

.colony-announcements-empty {
    text-align: center;
    color:var(--text-muted);
    padding: 24px 12px;
}

.colony-announcement-item {
    background: var(--bg-surface);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
}

.colony-announcement-item-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 6px;
}

.colony-announcement-item-head time {
    color:var(--text-muted);
    white-space: nowrap;
}

.colony-announcement-item-text {
    margin: 0;
    font-size: 13px;
    color:var(--text-main);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 640px) {
    .merchant-week-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .merchant-pricing-row--3 {
        grid-template-columns: 1fr 1fr;
    }
}

.remote-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--text-main);
    border-radius: 16px;
    background: var(--card-bg);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
    padding: 8px;
    gap: 5px;
    box-shadow: var(--shadow-flat);
    overflow: hidden;
    min-width: 0;
}

.remote-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 4px 4px 0px var(--text-main);
}

.remote-btn:active {
    transform: translateY(1px);
    box-shadow: 1px 1px 0px var(--text-main);
}

.remote-btn svg {
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
    flex-shrink: 0;
}

.remote-btn span {
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
}

.remote-btn > span:not(.colony-remote-badge),
.remote-btn-text {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    line-height: 1.15;
}

.colony-remote-btn-badge-host {
    position: relative;
}

.colony-remote-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid white;
    line-height: 1;
}

/* --- Game Editor Modal --- */
.editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.editor-col {
    min-width: 0;
}

.json-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.75rem;
    border: 2px solid var(--text-main);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-flat);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.json-btn-blue {
    background: #eff6ff;
    color: #1d4ed8;
}

.json-btn-green {
    background: #ecfdf5;
    color: #047857;
}

.json-btn-orange {
    background: var(--warn-bg);
    color: #c2410c;
}

.json-action-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-flat-lg);
}

.editor-json-panel {
    background: var(--info-bg);
    border: 2px dashed #8b5cf6;
    border-radius: var(--border-radius-md);
    padding: 1rem;
    margin-bottom: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.editor-json-panel-title {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #6d28d9;
}

.editor-json-textarea {
    width: 100%;
    height: 120px;
    background: var(--card-bg);
    border: 2px solid var(--text-main);
    border-radius: var(--border-radius-sm);
    color: var(--text-main);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    padding: 0.5rem;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
}

.editor-json-textarea:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* --- ???????????????????????????????? --- */
.colony-tag-picker-wrap {
    border: 1.5px solid #e2e8f0;
    padding: 15px;
    border-radius: 16px;
    background: #fcfdfe;
}

.colony-tag-section-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.colony-tag-section-label:not(:first-child) {
    margin-top: 0.75rem;
}

.colony-selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    min-height: 20px;
}

.colony-selected-tags-hint {
    color:var(--text-muted);
    font-size: 12px;
}

.colony-selected-tag-badge {
    background: #e0f2fe;
    color: #0284c7;
    padding: 6px 12px;
    border-radius: 16px;
    border: 1px solid #7dd3fc;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.colony-selected-tag-badge:hover {
    background: #bae6fd;
}

.colony-tag-main-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.colony-tag-tab {
    padding: 6px 14px;
    border-radius: 8px 8px 0 0;
    border: 1px solid #cbd5e1;
    border-bottom: none;
    cursor: pointer;
    font-size: 13px;
    background: var(--card-bg);
    color:var(--text-muted);
    font-weight: 600;
}

.colony-tag-tab.is-active {
    background: #334155;
    color: #fff;
    border-color:var(--text-main);
    font-weight: bold;
}

.colony-tag-sub-area {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px;
    background: var(--bg-surface);
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    min-height: 40px;
    align-items: center;
}

.colony-tag-chip {
    padding: 4px 10px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 12px;
    background: var(--card-bg);
    color:var(--text-muted);
    border: 1px solid #cbd5e1;
    transition: 0.2s;
    user-select: none;
}

.colony-tag-chip small {
    opacity: 0.7;
}

.colony-tag-chip:hover {
    border-color:var(--text-muted);
}

.colony-tag-chip.is-selected {
    background: #0ea5e9;
    color: #fff;
    border-color: #0ea5e9;
}

.colony-tag-chip-main {
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: bold;
    margin-bottom: 4px;
    background: var(--bg-surface);
    color:var(--text-main);
    border: 1px solid #cbd5e1;
}

.colony-tag-chip-main.is-selected {
    background: #0ea5e9;
    color: #fff;
    border-color: #0ea5e9;
}

.colony-tag-sub-divider {
    width: 100%;
    display: block;
    height: 1px;
    background: var(--border-soft);
    margin: 4px 0;
}

.colony-tag-search-hint {
    font-size: 12px;
    color:var(--text-muted);
    margin-bottom: 8px;
    width: 100%;
}

.colony-tag-search-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.colony-tag-search-input {
    flex: 1;
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-family: var(--font-family);
    font-size: 0.85rem;
    background: var(--card-bg);
    color: var(--color-text-primary);
    outline: none;
    margin: 0;
}

.colony-tag-search-input:focus {
    border-color:var(--text-main);
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.1);
}

.colony-tag-add-btn {
    background: #1e293b;
    color: #fff;
    padding: 0 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    font-size: 14px;
}

.colony-tag-add-btn:hover {
    background: #334155;
}

.colony-tag-warning {
    color: var(--color-danger);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    font-weight: 700;
}

.selected-tags-container {
    min-height: 38px;
    padding: 0.5rem;
    background: var(--card-bg);
    border: 2px solid var(--text-main);
    border-radius: var(--border-radius-sm);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.selected-tags-hint {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.selected-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #dbeafe;
    color: var(--color-brand);
    border: 1.5px solid var(--color-brand);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.category-tag-library {
    background: var(--bg-surface);
    border: 2px solid var(--text-main);
    border-radius: var(--border-radius-sm);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.category-tag-library-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.tag-library-tabs {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    border-bottom: 1.5px solid rgba(44, 34, 30, 0.12);
    padding-bottom: 0.5rem;
    overflow-x: auto;
}

.tag-tab-btn {
    padding: 0.35rem 0.65rem;
    border: 2px solid var(--text-main);
    border-radius: 999px;
    background: var(--card-bg);
    font-family: var(--font-family);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--color-text-secondary);
    white-space: nowrap;
    transition: all 0.15s ease;
}

.tag-tab-btn.active {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--text-main);
}

.tag-library-pane {
    display: none;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tag-library-pane.active {
    display: flex;
}

.btn-library-tag {
    padding: 0.25rem 0.55rem;
    border: 2px solid var(--text-main);
    border-radius: 999px;
    background: var(--card-bg);
    font-family: var(--font-family);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--color-text-primary);
    transition: all 0.15s ease;
}

.btn-library-tag:hover {
    background: #eff6ff;
}

.btn-library-tag.active {
    background: #dbeafe;
    color: var(--color-brand);
    border-color: var(--color-brand);
}

.tag-suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 48px;
    background: var(--card-bg);
    border: 2px solid var(--text-main);
    border-radius: var(--border-radius-sm);
    z-index: 10;
    max-height: 150px;
    overflow-y: auto;
    box-shadow: var(--shadow-flat-lg);
}

.suggestion-item {
    padding: 0.45rem 0.65rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-main);
}

.suggestion-item:hover {
    background: #eff6ff;
    color: var(--color-brand);
}

.btn-quick-player,
.btn-quick-date {
    min-width: 32px;
    height: 32px;
    padding: 0 0.5rem;
    border: 2px solid var(--text-main);
    border-radius: 8px;
    background: var(--card-bg);
    font-family: var(--font-family);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-main);
    box-shadow: var(--shadow-flat);
    transition: all 0.15s ease;
}

.btn-quick-player:hover,
.btn-quick-date:hover {
    transform: translateY(-1px);
}

.btn-quick-player.active,
.btn-quick-date.active {
    background: var(--color-brand);
    color: #fff;
}

.editor-expansions-section {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1.5px solid rgba(44, 34, 30, 0.12);
}

.expansions-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.expansions-section-header h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.editor-expansions-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.expansion-edit-row {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.5rem;
    background: var(--bg-surface);
    border: 2px solid var(--text-main);
    border-radius: var(--border-radius-sm);
}

.exp-row-main {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.8fr 1.5fr auto;
    gap: 0.5rem;
    align-items: start;
}

.expansion-edit-row input,
.expansion-edit-row select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1.5px solid var(--text-main);
    border-radius: 8px;
    font-size: 0.8rem;
    background: var(--card-bg);
    color: var(--text-main);
    box-sizing: border-box;
}

.exp-purchaser-wrap,
.exp-date-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.exp-date-quick-btns {
    display: flex;
    gap: 0.2rem;
    flex-wrap: wrap;
}

.exp-date-quick-btns .btn-quick-date {
    min-width: auto;
    height: 26px;
    padding: 0 0.35rem;
    font-size: 0.7rem;
}

#editPurchaser,
#editPurchaserCustom,
.purchaser-custom-input {
    width: 100%;
    box-sizing: border-box;
}

.btn-remove-exp {
    width: 36px;
    height: 36px;
    border: 2px solid var(--text-main);
    border-radius: 8px;
    background: var(--danger-bg);
    color: #dc2626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove-exp:hover {
    background: #fee2e2;
}

/* --- ???????JSON ????????? --- */
.colony-editor-modal .editor-sea-label {
    color:var(--text-muted);
}

.colony-editor-modal .editor-json-panel {
    background: rgba(139, 92, 246, 0.08);
    border: 1px dashed rgba(139, 92, 246, 0.45);
}

.colony-editor-modal .editor-json-panel-title {
    color: #c4b5fd;
}

.colony-editor-modal .editor-json-textarea {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(255, 255, 255, 0.15);
    color: #f8fafc;
}

.colony-editor-modal .editor-json-textarea:focus {
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.editor-sea-picker {
    position: relative;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(14, 165, 233, 0.08);
    border: 2px dashed rgba(14, 165, 233, 0.35);
    border-radius: var(--border-radius-md);
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.editor-sea-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: var(--color-text-secondary);
}

.editor-sea-search-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    position: relative;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
}

.editor-sea-search-row input {
    flex: 1 1 auto;
    min-width: 0; /* allow shrink so ???? stays inside dashed frame */
    width: 0; /* flex basis: ignore placeholder intrinsic min-width */
    height: 36px;
    padding: 0 0.75rem;
    border: 2px solid var(--text-main);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    box-sizing: border-box;
}

.editor-sea-search-row #btnClearSeaPick {
    flex: 0 0 auto;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    white-space: nowrap;
    line-height: 1.2;
}

.editor-sea-suggest {
    margin-top: 0.35rem;
    background: var(--card-bg);
    border: 2px solid var(--text-main);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-flat-lg);
    max-height: 220px;
    overflow-y: auto;
}

.editor-sea-suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.75rem;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    background: var(--card-bg);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-main);
}

.editor-sea-suggest-item.active,
.editor-sea-suggest-item:hover {
    background: var(--info-bg);
}

.editor-sea-suggest-empty {
    padding: 0.65rem 0.75rem;
    font-size: 0.8rem;
    color:var(--text-muted);
}

.editor-sea-picked {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.45rem 0.65rem;
    background: #ecfdf5;
    border: 1.5px solid #10b981;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
    color: #047857;
    flex-wrap: wrap;
}
.editor-sea-picked #editorSeaPickedLabel {
    flex: 1;
    min-width: 0;
}
.editor-sea-sync-btn {
    margin-left: auto;
    font-weight: 600;
}
.sea-sync-fields-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 0.75rem;
    max-height: 280px;
    overflow: auto;
    padding: 0.35rem 0.15rem;
}
.sea-sync-field-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color:var(--text-main);
    cursor: pointer;
    user-select: none;
}
.sea-sync-field-row input {
    width: 1rem;
    height: 1rem;
    accent-color: #0f766e;
}
@media (max-width: 480px) {
    .sea-sync-fields-list {
        grid-template-columns: 1fr;
    }

    .editor-sea-search-row {
        flex-wrap: wrap;
    }

    .editor-sea-search-row input {
        flex: 1 1 calc(100% - 3.5rem);
        width: auto;
        min-width: 0;
    }

    .editor-sea-search-row #btnClearSeaPick {
        padding: 0.3rem 0.55rem;
        font-size: 0.72rem;
    }
}

@media (max-width: 900px) {
    .colony-editor-modal .editor-grid {
        grid-template-columns: 1fr;
    }

    .exp-row-main {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .exp-row-main {
        grid-template-columns: 1fr;
    }
}

.join-settings-input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 2px solid var(--text-main, #2d3436);
    border-radius: var(--border-radius-md, 8px);
    font-size: 0.9rem;
    background: var(--card-bg);
    box-sizing: border-box;
}

.join-settings-hint {
    color:var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem;
}

.join-settings-label {
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.join-settings-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.join-settings-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.join-settings-remove,
.join-quiz-remove {
    background: var(--danger-bg);
    color: #ef4444;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 0 10px;
    cursor: pointer;
}

.join-settings-add,
.join-settings-add-sm {
    margin-top: 0.5rem;
    padding: 0.5rem;
    width: 100%;
    border: 1px dashed #94a3b8;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
}

.join-settings-add-sm {
    width: auto;
    font-size: 0.75rem;
}

.join-quiz-card {
    background: var(--bg-surface);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    position: relative;
    margin-bottom: 0.5rem;
}

.join-quiz-option,
.join-quiz-option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.join-visitor-field {
    margin-bottom: 0.75rem;
}

.join-visitor-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.review-requests-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 420px;
    overflow-y: auto;
}

.lib-members-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 420px;
    overflow-y: auto;
}

.lib-member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 2px solid var(--text-main);
    border-radius: 10px;
    background: var(--card-bg);
    box-shadow: var(--shadow-flat);
}

.lib-member-main {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    flex: 1;
}

.lib-member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #e2e8f0;
    flex-shrink: 0;
}

.lib-member-profile-hit {
    cursor: pointer;
}

img.lib-member-profile-hit:hover {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}

span.lib-member-profile-hit:hover {
    color: #0284c7;
    text-decoration: underline;
}

.lib-member-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lib-member-name {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lib-member-you {
    font-weight: 700;
    color: var(--color-brand);
}

.lib-member-uid {
    font-size: 0.68rem;
    color:var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lib-member-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.lib-member-role {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1.5px solid var(--text-main);
}

.lib-member-role--owner {
    background: var(--warn-bg);
    color: #92400e;
}

.lib-member-role--admin {
    background: #dbeafe;
    color: #1e40af;
}

.lib-member-role--member {
    background: var(--bg-surface);
    color:var(--text-muted);
}

.lib-member-role--visitor {
    background: var(--danger-bg);
    color: #b91c1c;
}

.lib-member-role-select {
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: var(--bg-surface);
    font-family: var(--font-family);
    max-width: 7.5rem;
}

.colony-hub-modal .description {
    margin-bottom: 0.75rem;
}

.colony-hub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.colony-hub-tab {
    flex: 1 1 auto;
    min-width: 4.5rem;
    padding: 0.45rem 0.65rem;
    border-radius: 10px;
    border: 2px solid var(--border-color);
    background: var(--card-bg);
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    font-family: var(--font-family);
    color: var(--color-text-secondary);
}

.colony-hub-tab.active {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--text-main);
}

.colony-hub-panel {
    display: none;
}

.colony-hub-panel.active {
    display: block;
}

.colony-hub-section-desc {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.colony-hub-perm-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 280px;
    overflow-y: auto;
}

.colony-hub-perm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    background: var(--bg-surface);
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.colony-hub-perm-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.colony-hub-perm-select {
    font-size: 0.72rem;
    padding: 0.2rem 0.35rem;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    max-width: 8.5rem;
}

.colony-hub-merchant-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.colony-hub-merchant-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    background: var(--warn-bg);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-family);
    box-shadow: var(--shadow-flat);
    transition: transform var(--transition-speed);
}

.colony-hub-merchant-card:hover {
    transform: translate(-1px, -1px);
}

.colony-hub-merchant-card i {
    color: #b45309;
    font-size: 1rem;
}

.colony-hub-merchant-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #92400e;
}

.colony-hub-merchant-sub {
    font-size: 0.7rem;
    color: #a16207;
    line-height: 1.35;
}

.lib-member-remove {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1.5px solid #fecaca;
    background: var(--danger-bg);
    color: #b91c1c;
    cursor: pointer;
}

.lib-member-remove:hover {
    background: #fee2e2;
}

.join-request-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    background: var(--card-bg);
}

.join-request-header {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.join-request-header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.join-request-name {
    font-weight: 700;
    font-size: 0.95rem;
}

.join-request-date {
    font-size: 0.7rem;
    color:var(--text-muted);
}

.join-request-answers {
    margin-top: 0.5rem;
    background: var(--bg-surface);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
}

.join-request-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* --- ???????????? alert / confirm / prompt??--- */
.colony-dialog-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 13200;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.colony-dialog-overlay.active {
    display: flex;
}

body.colony-dialog-open {
    overflow: hidden;
}

.colony-dialog {
    width: min(92vw, 400px);
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 1.25rem 1.35rem 1.1rem;
    box-shadow: 0 16px 36px rgba(44, 34, 30, 0.14), var(--shadow-flat);
    animation: colonyDialogIn 0.2s ease-out;
}

@keyframes colonyDialogIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.colony-dialog-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--primary-soft, #d1fae5);
    color: var(--color-brand, #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.colony-dialog--danger .colony-dialog-icon {
    background: var(--danger-bg);
    color: #dc2626;
}

.colony-dialog--prompt .colony-dialog-icon {
    background: #ecfdf5;
    color: #047857;
}

.colony-dialog-title {
    font-size: 1.05rem;
    font-weight: 800;
    color:var(--text-main);
    margin: 0 0 0.4rem;
    line-height: 1.35;
}

.colony-dialog-message {
    font-size: 0.88rem;
    color:var(--text-muted);
    margin: 0 0 0.85rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* ?????? select???????????????????? */
.tm-pickup-history-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.tm-pickup-history-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
}
.tm-pickup-history-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.tm-pickup-history-btn {
    background: var(--card-bg);
    color: #0369a1;
    border: 1px solid #93c5fd;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.tm-pickup-history-btn--save {
    color: #92400e;
    border-color: #fbbf24;
    background: #fffbeb;
}
.tm-pickup-history-select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 13px;
    margin-bottom: 8px;
    background: var(--card-bg);
}

.colony-dialog-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.8rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-family: var(--font-family);
    font-size: 0.9rem;
    font-weight: 600;
    color:var(--text-main);
    margin-bottom: 1rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.colony-dialog-input:focus {
    border-color:var(--text-main);
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.12);
}

.colony-dialog-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.colony-dialog-btn {
    min-width: 88px;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    font-family: var(--font-family);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s ease;
}

.colony-dialog-btn-cancel {
    background: var(--card-bg);
    color:var(--text-muted);
    border-color: var(--border-soft);
}

.colony-dialog-btn-cancel:hover {
    background: var(--bg-surface);
    border-color:var(--text-muted);
}

.colony-dialog-btn-confirm {
    background: var(--primary-hover, #047857);
    color: #fff;
    border-color: var(--primary-hover, #047857);
}

.colony-dialog-btn-confirm:hover {
    background: #065f46;
    border-color: #065f46;
}

.colony-dialog-btn-danger {
    background: #dc2626;
    border-color: #dc2626;
}

.colony-dialog-btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.colony-dialog--alert .colony-dialog-actions {
    justify-content: center;
}

@media (max-width: 480px) {
    .filter-toggle-label {
        display: none;
    }

    .search-filter-row > .cabinet-filter-wrapper {
        flex: 0 1 26%;
        min-width: 4.25rem;
        max-width: 32%;
    }

    .search-filter-row > .sort-wrapper {
        flex: 0 1 28%;
        min-width: 4.5rem;
        max-width: 34%;
    }

    .colony-dialog-actions {
        flex-direction: column-reverse;
    }

    .colony-dialog-btn {
        width: 100%;
        min-width: 0;
    }
}

/* --- ??????????????????????--- */
.colony-account-menu-content {
    max-width: 320px;
    text-align: center;
    padding: 1.75rem 1.5rem 1.5rem;
}

.colony-account-menu-header {
    margin-bottom: 1.25rem;
}

.colony-account-menu-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid #e0f2fe;
    margin-bottom: 0.65rem;
    object-fit: cover;
}

.colony-account-menu-name {
    font-size: 1.125rem;
    font-weight: 800;
    color:var(--text-main);
}

.colony-account-menu-email {
    font-size: 0.75rem;
    color:var(--text-muted);
    margin-top: 0.2rem;
}

.colony-account-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.colony-menu-item-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--text-main, #2d3436);
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text-main, #2d3436);
    font-weight: 800;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 3px 3px 0 var(--text-main, #2d3436);
}

.colony-menu-item-btn:hover {
    background: var(--bg-surface);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--text-main, #2d3436);
}

.colony-menu-item-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--text-main, #2d3436);
}

.colony-menu-item-btn--update {
    background: var(--info-bg);
    color: #0366d6;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.65rem 1rem;
    position: relative;
}

.colony-menu-update-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.colony-menu-item-btn--update .version-display-inline {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
}

#version-display.version-display--dev,
.version-display-inline.version-display--dev {
    color: #b45309;
    font-weight: 700;
}

#version-display.version-display--live,
.version-display-inline.version-display--live {
    color:var(--text-muted);
    font-weight: 600;
}

#version-display.version-display--outdated,
.version-display-inline.version-display--outdated {
    color: #c2410c;
    font-weight: 800;
}

.colony-menu-item-btn--update.has-update {
    background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;
    color: #c2410c !important;
    border-color: #f59e0b !important;
}

.update-available-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.03em;
}

#colony-account-menu-modal.colony-account-menu--guest .colony-account-menu-guest-only {
    display: flex !important;
}

#colony-account-menu-modal:not(.colony-account-menu--guest) .colony-account-menu-guest-only {
    display: none !important;
}

#colony-account-menu-modal.colony-account-menu--guest .colony-account-menu-user-only {
    display: none !important;
}

#colony-menu-guest-login-btn {
    background: #0ea5e9;
    color: #fff;
    border-color: #0284c7;
}

/* --- ?????????????????????--- */
.lobby-view {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 2rem;
}

.lobby-hero {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.35rem;
    border-radius: 16px;
    border: 2px solid var(--text-main, #2d3436);
    background: linear-gradient(135deg, #ecfdf5 0%, #f0f9ff 55%, #fff 100%);
    box-shadow: 4px 4px 0 var(--text-main, #2d3436);
}

.lobby-hero-title {
    margin: 0 0 0.4rem;
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--text-main, #2d3436);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lobby-hero-title i {
    color: #059669;
}

.lobby-hero-desc {
    margin: 0;
    font-size: 0.9rem;
    color:var(--text-muted);
    line-height: 1.5;
}

.lobby-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.lobby-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.75rem;
    flex: 1 1 280px;
    justify-content: flex-end;
    min-width: 0;
}

.lobby-manage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.lobby-manage-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border: 2px solid var(--text-main, #2d3436);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-main, #2d3436);
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--text-main, #2d3436);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.lobby-manage-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--text-main, #2d3436);
}

.lobby-manage-btn--primary {
    background: #10b981;
    color: #fff;
    border-color: #047857;
    box-shadow: 3px 3px 0 #047857;
}

.lobby-manage-btn--primary:hover {
    box-shadow: 4px 4px 0 #047857;
}

.lobby-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.8rem;
    font-weight: 800;
    border: 1.5px solid #a7f3d0;
}

.lobby-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 220px;
    max-width: 360px;
    min-width: 0;
    border: 2px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    background: var(--card-bg);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.lobby-search-wrap:focus-within {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.lobby-search-icon {
    flex-shrink: 0;
    margin-left: 0.85rem;
    color:var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.lobby-search-input {
    width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 0.75rem 0 0.35rem;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    background: transparent;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.lobby-search-input:focus {
    outline: none;
    box-shadow: none;
}

.lobby-grid {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
}

.lobby-grid.card-mode {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.lobby-grid.list-mode .lobby-library-card,
.lobby-grid:not(.card-mode) .lobby-library-card {
    flex-direction: row;
    align-items: stretch;
}

.lobby-grid.list-mode .lobby-library-cover,
.lobby-grid:not(.card-mode) .lobby-library-cover {
    width: 108px;
    min-width: 108px;
    aspect-ratio: 1;
    flex-shrink: 0;
}

.lobby-grid.list-mode .lobby-library-body,
.lobby-grid:not(.card-mode) .lobby-library-body {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
}

.lobby-grid.list-mode .lobby-library-title,
.lobby-grid:not(.card-mode) .lobby-library-title {
    font-size: 0.95rem;
    margin: 0;
}

.lobby-grid.list-mode .lobby-library-meta,
.lobby-grid:not(.card-mode) .lobby-library-meta {
    margin-top: 0;
}

.lobby-grid.card-mode .lobby-library-card {
    flex-direction: column;
}

.lobby-grid.card-mode .lobby-library-cover {
    width: 100%;
    aspect-ratio: 16 / 10;
}

.lobby-grid.card-mode .lobby-library-body {
    padding: 0.85rem 1rem 1rem;
}

.colony-lobby-view-toolbar {
    flex-shrink: 0;
}

.lobby-library-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(44, 34, 30, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    min-width: 0;
}

.lobby-library-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-flat);
    border-color: color-mix(in srgb, var(--color-brand) 40%, var(--border-soft));
}

.lobby-library-card:active {
    transform: translateY(0);
    box-shadow: 0 1px 0 rgba(44, 34, 30, 0.04);
}

.lobby-library-cover {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(145deg, #dbeafe 0%, #d1fae5 100%);
    overflow: hidden;
}

.lobby-library-share-btn {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: transform 0.15s ease, background 0.15s ease;
}

.lobby-library-share-btn:hover {
    transform: scale(1.06);
    background: rgba(15, 23, 42, 0.9);
}

.lobby-library-share-btn:active {
    transform: scale(0.96);
}

.colony-onboarding-choice-content {
    text-align: center;
}

.colony-onboarding-choice-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.colony-onboarding-choice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3rem;
    font-size: 1rem;
    font-weight: 800;
}

.colony-onboarding-choice-skip {
    margin-top: 0.85rem;
    color:var(--text-muted);
    font-size: 0.9rem;
}

.colony-onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 25000;
    display: none;
    pointer-events: none;
}

.colony-onboarding-overlay .colony-onboarding-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    pointer-events: auto;
}

.colony-onboarding-highlight {
    position: fixed;
    display: none;
    border: 3px solid #38bdf8;
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55), 0 0 0 6px rgba(56, 189, 248, 0.25);
    pointer-events: none;
    z-index: 25001;
    transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.colony-onboarding-card {
    position: fixed;
    z-index: 25002;
    width: min(300px, calc(100vw - 32px));
    padding: 1rem 1rem 0.85rem;
    border-radius: 16px;
    background: var(--card-bg);
    border: 2px solid #0f172a;
    box-shadow: 6px 6px 0 #0f172a;
    pointer-events: auto;
}

.colony-onboarding-card--center {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

.colony-onboarding-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.colony-onboarding-step {
    font-size: 0.72rem;
    font-weight: 800;
    color:var(--text-muted);
}

.colony-onboarding-skip {
    border: none;
    background: none;
    color:var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.15rem 0.25rem;
}

.colony-onboarding-title {
    margin: 0 0 0.45rem;
    font-size: 1.05rem;
    font-weight: 900;
    color:var(--text-main);
}

.colony-onboarding-body {
    margin: 0 0 0.85rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color:var(--text-muted);
}

.colony-onboarding-hint {
    margin: -0.35rem 0 0.75rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #0ea5e9;
    font-weight: 600;
}

.colony-onboarding-resume-chip {
    position: fixed;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 26000;
    display: none;
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    border: 2px solid #0f172a;
    background: #38bdf8;
    color:var(--text-main);
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 4px 4px 0 #0f172a;
    cursor: pointer;
}

.colony-onboarding-resume-chip:active {
    transform: translateX(-50%) translate(2px, 2px);
    box-shadow: 2px 2px 0 #0f172a;
}

.colony-onboarding-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.colony-onboarding-nav {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

.colony-onboarding-target {
    position: relative;
    z-index: 25003 !important;
}

body.colony-onboarding-active {
    overflow: hidden;
}

body.colony-onboarding-active .colony-onboarding-overlay {
    pointer-events: auto;
}

.colony-rules-embed-shell {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
}

.colony-rules-embed-shell[hidden] {
    display: none !important;
}

.colony-rules-embed-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: max(0.65rem, env(safe-area-inset-top, 0px)) 0.85rem 0.65rem;
    background: var(--card-bg);
    border-bottom: 2px solid #0f172a;
    box-shadow: 0 4px 0 rgba(15, 23, 42, 0.08);
}

.colony-rules-embed-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 2px solid #0f172a;
    border-radius: 999px;
    background: var(--card-bg);
    color:var(--text-main);
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
}

.colony-rules-embed-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0ea5e9;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.colony-rules-embed-frame {
    flex: 1;
    width: 100%;
    border: none;
    background: var(--card-bg);
}

body.colony-rules-embed-active {
    overflow: hidden;
}

body.colony-rules-embed-active .colony-remote-container {
    display: none !important;
}

.colony-card-input-section {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.colony-card-input-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color:var(--text-muted);
}

.colony-card-input-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.colony-card-input-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.45rem;
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.colony-card-row-fields {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.colony-card-dim-pair {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 2;
    min-width: 150px;
}

.colony-card-dim-pair input,
.colony-card-input-row .colony-card-count {
    flex: 1;
    min-width: 52px;
    padding: 0.45rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.85rem;
    box-sizing: border-box;
}

.colony-card-input-row .colony-card-count {
    max-width: 100px;
}

.colony-card-dim-x {
    color:var(--text-muted);
    font-weight: 700;
    flex-shrink: 0;
}

.colony-card-dim-unit {
    font-size: 0.7rem;
    color:var(--text-muted);
    font-weight: 700;
    flex-shrink: 0;
}

.colony-sleeve-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.btn-quick-sleeve {
    border: 1.5px solid var(--text-main);
    background: var(--card-bg);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-main);
    box-shadow: var(--shadow-flat);
}

.btn-quick-sleeve:hover {
    background: var(--color-brand);
    color: #fff;
}

.colony-card-remove {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 8px;
    background: var(--bg-surface);
    color:var(--text-muted);
    cursor: pointer;
}

.colony-sleeved-toggle {
    margin-top: 0.25rem;
}

.exp-sleeve-block {
    border-top: 1px dashed rgba(44, 34, 30, 0.18);
    padding-top: 0.45rem;
}

.exp-sleeve-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.exp-sleeve-toggle-label {
    padding-left: 1.8rem;
    margin: 0;
    font-size: 0.8rem;
}

.exp-sleeve-fields .colony-card-input-list {
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .exp-row-main {
        grid-template-columns: 1fr;
    }
}

.colony-village-chat-shell {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
}

.colony-village-chat-shell[hidden] {
    display: none !important;
}

.colony-village-chat-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: max(0.65rem, env(safe-area-inset-top, 0px)) 0.85rem 0.65rem;
    background: #0ea5e9;
    color: #fff;
    box-shadow: 0 4px 0 rgba(14, 165, 233, 0.25);
}

.colony-village-chat-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
}

.colony-village-chat-title {
    font-size: 0.95rem;
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.colony-village-chat-tabs {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    background: #0284c7;
    flex-shrink: 0;
}

.colony-vchat-tab {
    flex: 1;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.45rem 0.5rem;
    cursor: pointer;
}

.colony-vchat-tab.active {
    background: var(--card-bg);
    color: #0284c7;
}

.colony-village-chat-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    gap: 0.5rem;
}

.colony-vchat-consult-back {
    align-self: flex-start;
    border: none;
    background: var(--border-soft);
    color:var(--text-main);
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.colony-village-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.25rem;
}

.colony-vchat-msg {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    align-self: flex-start;
}

.colony-vchat-msg--me {
    align-self: flex-end;
}

.colony-vchat-msg-name {
    font-size: 0.65rem;
    color:var(--text-muted);
    margin-bottom: 0.15rem;
}

.colony-vchat-msg--me .colony-vchat-msg-name {
    text-align: right;
}

.colony-vchat-msg-bubble {
    background: var(--card-bg);
    color:var(--text-main);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.colony-vchat-msg--me .colony-vchat-msg-bubble {
    background: #0ea5e9;
    color: #fff;
    border-color: #0ea5e9;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 4px;
}

.colony-vchat-system {
    align-self: center;
    background: var(--border-soft);
    color:var(--text-muted);
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
}

.colony-vchat-empty,
.colony-vchat-loading {
    text-align: center;
    color:var(--text-muted);
    margin-top: 2.5rem;
    font-size: 0.9rem;
}

.colony-vchat-denied {
    text-align: center;
    color: #ef4444;
    margin-top: 2rem;
    padding: 0 1rem;
}

.colony-vchat-denied i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
}

.colony-vchat-denied p {
    color:var(--text-muted);
    font-size: 0.85rem;
    margin: 0.5rem 0 1rem;
}

.colony-vchat-consult-item {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.colony-vchat-consult-item strong {
    display: block;
    color: #0ea5e9;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.colony-vchat-consult-item span {
    display: block;
    color:var(--text-muted);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.colony-village-chat-input-wrap {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-shrink: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.colony-village-chat-input {
    flex: 1;
    min-height: 2.5rem;
    max-height: 6rem;
    resize: none;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    font-family: inherit;
}

.colony-village-chat-send {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.colony-village-chat-active {
    overflow: hidden;
}

body.colony-village-chat-active .colony-remote-container {
    display: none !important;
}

.colony-merchant-embed-shell {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
}

/* ??????????????????? .sub-pill-bar ?????????????????????????*/
.colony-merchant-embed-toolbar,
.colony-merchant-subnav {
    display: none !important;
}

.colony-merchant-embed-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.colony-merchant-subnav-btn {
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    background: var(--card-bg);
    color:var(--text-muted);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-family);
}

.colony-merchant-subnav-btn:hover {
    background: var(--bg-surface);
}

.colony-merchant-subnav-btn.active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
}

.colony-merchant-subnav-btn[data-colony-merchant-page="shop"].active {
    background: #f59e0b;
    border-color: #f59e0b;
}

.colony-merchant-subnav-btn[data-colony-merchant-page="posts"].active {
    background: #f43f5e;
    border-color: #f43f5e;
}

.colony-merchant-subnav-btn[data-colony-merchant-page="rentals"].active {
    background: #d97706;
    border-color: #d97706;
}

.colony-merchant-embed-shell.is-open.colony-merchant-subnav-mobile .colony-merchant-native-body {
    padding-bottom: 0;
}

.colony-mmember-modal {
    max-width: 560px;
    text-align: left;
}

.colony-mmember-modal-body {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.colony-mfeat-panel--modal {
    min-height: 0;
}

.colony-mfeat-list--modal {
    padding: 0.5rem 0 0;
}

body.colony-mmember-modal-open {
    overflow: hidden;
}

.colony-mmember-tabs {
    margin: 0.75rem 0 0.5rem;
}

.colony-mfeat-card-img {
    margin: 0.4rem 0;
    border-radius: 10px;
    overflow: hidden;
    max-height: 220px;
}

.colony-mfeat-card-img img {
    width: 100%;
    height: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
}

.colony-mfeat-card-img--ratio-1-1 {
    max-height: none;
    aspect-ratio: 1 / 1;
}

.colony-mfeat-card-img--ratio-16-9 {
    max-height: none;
    aspect-ratio: 16 / 9;
}

.colony-mfeat-card-img--ratio-1-1 img,
.colony-mfeat-card-img--ratio-16-9 img {
    max-height: none;
    height: 100%;
    object-fit: cover;
}

.colony-mfeat-card-img--multi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    max-height: none;
}

.colony-mfeat-card-img--multi.colony-mfeat-card-img--ratio-1-1,
.colony-mfeat-card-img--multi.colony-mfeat-card-img--ratio-16-9 {
    aspect-ratio: auto;
}

.colony-mfeat-card-img--multi img {
    max-height: 160px;
    aspect-ratio: 1 / 1;
    height: auto;
}

/* --- ?W?[??~???o???K?? modal FRAME --- */
/* ?????? body.colony-merchant-embed-active .sub-pill-bar (13050)?A??K??????B?\ modal */
#colony-merchant-publish-modal {
    z-index: 13150;
}

#colony-merchant-publish-modal.modal.active {
    align-items: center;
    justify-content: center;
    padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    box-sizing: border-box;
}

#colony-merchant-publish-modal.modal.active > .colony-mpub-modal {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    align-self: center;
    width: min(640px, 94vw);
    max-width: 640px;
    max-height: min(90vh, calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0;
    contain: none;
    box-sizing: border-box;
}

.colony-mpub-modal {
    max-width: 640px;
    text-align: left;
}

.colony-mpub-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.85rem 1.15rem 1.15rem;
    overscroll-behavior: contain;
}

/* Quill / sticky footer must stay inside the scrolling body */
.colony-mpub-modal-body .colony-mpub-quill-wrap {
    max-width: 100%;
    overflow: visible; /* allow # hashtag popup below caret */
}

.colony-mpub-modal-body .colony-mpub-actions {
    position: sticky;
    bottom: 0;
}

body.colony-mpub-modal-open {
    overflow: hidden;
}

/* ???O iframe?G?H iframe ????????A??K 100vh ?j????i???? */
html.tm-embedded #colony-merchant-publish-modal.modal.active > .colony-mpub-modal {
    max-height: min(90vh, calc(100dvh - 1.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}

.colony-mpub-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.colony-mpub-type-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.colony-mpub-type-tab {
    flex: 1 1 calc(20% - 6px);
    min-width: 64px;
    padding: 8px 4px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: var(--card-bg);
    color:var(--text-muted);
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s;
}

.colony-mpub-type-tab.active {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
}

.colony-mpub-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.colony-mpub-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.colony-mpub-title-input-rel {
    position: relative;
}

.colony-mpub-title-input-rel .game-tag-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    max-height: 220px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    margin-top: 4px;
}

.colony-mpub-title-input-rel .game-tag-suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    background: var(--card-bg);
    cursor: pointer;
    font-size: 13px;
    color:var(--text-main);
    font-weight: 600;
}

.colony-mpub-title-input-rel .game-tag-suggest-item.is-active,
.colony-mpub-title-input-rel .game-tag-suggest-item:hover {
    background: var(--info-bg);
}

.colony-mpub-title-game-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.colony-mpub-title-game-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--warn-bg);
    border: 1px solid #fde68a;
    border-radius: 20px;
    padding: 3px 8px;
    font-size: 12px;
    color: #92400e;
    font-weight: 700;
}

.colony-mpub-title-game-tag button {
    background: none;
    border: none;
    color: #b45309;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

.colony-mpub-section--rewards {
    background: var(--warn-bg);
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
}

.colony-mpub-section--poll {
    background: var(--danger-bg);
    border: 1px dashed #fecdd3;
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
}

.colony-mpub-label {
    font-size: 0.8rem;
    font-weight: 700;
    color:var(--text-muted);
}

.colony-mpub-required {
    color: #ef4444;
}

.colony-mpub-hint {
    margin: 0;
    font-size: 0.72rem;
    color:var(--text-muted);
    line-height: 1.45;
}

.colony-mpub-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.colony-mpub-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.colony-mpub-chip-row--payment {
    padding-top: 6px;
    margin-bottom: 8px;
    border-top: 1px dashed #e2e8f0;
}

.colony-mpub-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    background: var(--card-bg);
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    user-select: none;
}

.colony-mpub-chip--accessory {
    background: #fdf4ff;
    border: 1.5px solid #d946ef;
    color: #a21caf;
    font-weight: 700;
}

.colony-mpub-textarea {
    resize: vertical;
    min-height: 96px;
    font-family: inherit;
    line-height: 1.5;
}

.colony-mpub-file {
    width: 100%;
    padding: 8px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    font-size: 0.8rem;
    color:var(--text-muted);
    cursor: pointer;
    box-sizing: border-box;
}

.colony-mpub-points-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #92400e;
    font-weight: 700;
}

.colony-mpub-points-row input {
    width: 100px;
    flex: 0 0 auto;
}

.colony-mpub-ticket-rewards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.colony-mpub-ticket-reward-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8rem;
    color: #78350f;
}

.colony-mpub-ticket-reward-name small {
    color: #b45309;
    margin-left: 4px;
}

.colony-mpub-ticket-reward-row input {
    width: 80px;
    flex: 0 0 auto;
}

.colony-mpub-publish-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #92400e;
    background: var(--warn-bg);
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    user-select: none;
}

.colony-mpub-anon-row {
    color:var(--text-muted);
    background: var(--bg-surface);
    border-color: #e2e8f0;
}

.colony-mpub-actions {
    display: flex;
    gap: 10px;
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0.35rem -0.15rem 0;
    padding: 0.75rem 0.15rem 0.15rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 70%, transparent) 0%, var(--card-bg) 35%);
    border-top: 1px solid var(--border-soft, #e2e8f0);
}

.colony-mpub-actions .btn {
    flex: 1;
    min-width: 0;
}

.colony-mpub-selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 6px;
}

.colony-mpub-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
}

.colony-mpub-tag-remove {
    border: none;
    background: transparent;
    color: #0369a1;
    font-size: 0.9rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.colony-mpub-tag-input-row {
    display: flex;
    gap: 8px;
}

.colony-mpub-tag-input-row input {
    flex: 1;
}

.colony-mpub-suggest-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background: var(--bg-surface);
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
}

.colony-mpub-tag-btn {
    border: 1px solid #cbd5e1;
    background: var(--card-bg);
    color:var(--text-muted);
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: 0.15s;
}

.colony-mpub-tag-btn.active {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
}

.colony-mpub-poll-type-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0.4rem 0;
}

.colony-mpub-poll-type-row select {
    flex: 1;
}

#colonyMpubPollOptions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0.4rem;
}

.colony-mpub-poll-option-row {
    display: flex;
    gap: 6px;
}

.colony-mpub-poll-option-row input {
    flex: 1;
}

.colony-mpub-post-type-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 0.75rem;
}

.colony-mpub-post-type-tab {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: var(--bg-surface);
    color:var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.colony-mpub-post-type-tab.active {
    background: var(--warn-bg);
    border-color: #fcd34d;
    color: #92400e;
}

.colony-mpub-optional {
    font-size: 0.75rem;
    font-weight: 500;
    color:var(--text-muted);
}

.colony-mpub-section--draw {
    background: var(--warn-bg);
    border: 1px dashed #fcd34d;
    border-radius: 10px;
    padding: 0.85rem;
}

.colony-mpub-draw-import-panel summary {
    cursor: pointer;
    font-weight: 600;
    color: #92400e;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.colony-mpub-draw-import-body {
    margin-top: 0.5rem;
}

.colony-mpub-draw-import-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0.5rem 0;
}

.colony-mpub-draw-import-row select {
    min-width: 120px;
}

.colony-mpub-draw-preview {
    margin: 0.5rem 0;
    padding: 0.5rem 0.65rem;
    background: var(--warn-bg);
    border-radius: 6px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #78350f;
    white-space: pre-wrap;
}

.colony-mpub-draw-import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.colony-mpub-draw-winner-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.4rem;
}

.colony-mpub-draw-winner-row .colony-mpub-draw-serial {
    width: 88px;
    flex-shrink: 0;
}

.colony-mpub-draw-winner-row .colony-mpub-draw-prize {
    flex: 1;
    min-width: 0;
}

.colony-mfeat-draw-block {
    margin: 0.5rem 0 0;
    padding: 0.65rem 0.75rem;
    background: var(--warn-bg);
    border: 1px dashed #fcd34d;
    border-radius: 8px;
}

.colony-mfeat-draw-head {
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #92400e;
}

.colony-mfeat-draw-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.8rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: var(--card-bg);
    margin-bottom: 0.35rem;
}

.colony-mfeat-draw-row--mine {
    background: var(--warn-bg);
}

.colony-mfeat-draw-serial {
    font-weight: 800;
    color: #b45309;
    min-width: 3rem;
}

.colony-mfeat-draw-prize {
    color:var(--text-main);
    flex: 1;
}

.colony-mfeat-draw-badge {
    font-size: 0.72rem;
    background: var(--border-soft);
    color:var(--text-muted);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.colony-mfeat-draw-badge--win {
    background: var(--warn-bg);
    color: #b45309;
}

.colony-mfeat-draw-paper {
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px dashed #fcd34d;
}

.colony-mfeat-draw-paper-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 0.4rem;
}

.colony-mfeat-draw-paper-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.colony-mfeat-draw-paper-row .lib-settings-text-input {
    flex: 1;
    min-width: 8rem;
}

.colony-mfeat-draw-lookup-msg {
    margin-top: 0.4rem;
    font-size: 0.78rem;
}

.colony-mfeat-draw-err {
    color: #ef4444;
}

.colony-mfeat-draw-win-msg {
    color: #059669;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.colony-mfeat-draw-more {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: #a16207;
}

/* ???? modal ????? */
.colony-mpub-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #f43f5e;
    color: #fff;
    margin: 0;
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
}

.colony-mpub-modal-header h2 {
    margin: 0;
    font-size: 1.05rem;
    color: inherit;
}

.colony-mpub-modal-close {
    border: none;
    background: var(--card-bg);
    color: #f43f5e;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.colony-mpub-theme-anonymous .colony-mpub-modal-header { background: #8b5cf6; }
.colony-mpub-theme-anonymous .colony-mpub-modal-close { color: #8b5cf6; }
.colony-mpub-theme-lfg .colony-mpub-modal-header { background: #059669; }
.colony-mpub-theme-lfg .colony-mpub-modal-close { color: #059669; }
.colony-mpub-theme-draw .colony-mpub-modal-header { background: #d97706; }
.colony-mpub-theme-draw .colony-mpub-modal-close { color: #d97706; }

.colony-mpub-template-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
}

.colony-mpub-template-label {
    font-size: 0.8rem;
    font-weight: 700;
    color:var(--text-muted);
    flex: 1 1 100%;
}

.colony-mpub-template-bar select {
    flex: 1;
    min-width: 140px;
}

.colony-mpub-type-description {
    display: none;
    padding: 10px 12px;
    background: var(--info-bg);
    border-left: 4px solid #0ea5e9;
    border-radius: 8px;
    color: #0369a1;
    font-size: 0.82rem;
    line-height: 1.45;
}

.colony-mpub-section--options {
    background: var(--info-bg);
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 0.75rem;
}

.colony-mpub-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0;
}

.colony-mpub-option-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(80px, 0.7fr) minmax(70px, 0.55fr) auto;
    gap: 6px;
    align-items: center;
}

.colony-mpub-vip-panel {
    border: 1px solid #fde68a;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

.colony-mpub-vip-panel summary {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
    color: #92400e;
}

.colony-mpub-vip-panel[open] {
    padding-bottom: 12px;
}

.colony-mpub-vip-panel[open] summary {
    border-bottom: 1px solid #fde68a;
    margin-bottom: 10px;
}

.colony-mpub-vip-panel > *:not(summary) {
    margin-left: 14px;
    margin-right: 14px;
}

.colony-mpub-vip-enable {
    margin-bottom: 10px;
}

.colony-mpub-color-input {
    width: 100%;
    height: 34px;
    padding: 2px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: var(--card-bg);
}

.colony-mpub-vip-preview {
    margin-top: 10px;
    font-size: 0.82rem;
}

.colony-mpub-vip-preview-price {
    margin: 6px 0;
    color: #0ea5e9;
    font-size: 1rem;
    font-weight: 800;
}

.colony-mpub-muted {
    color:var(--text-muted);
    font-size: 0.78rem;
    padding: 8px 0;
}

.colony-mpub-ship-row {
    color: #0369a1;
    background: var(--info-bg);
    border-color: #bae6fd;
    margin: 6px 0;
}

.colony-mpub-quick-row {
    color: #047857;
    background: #ecfdf5;
    border-color: #a7f3d0;
    margin: 6px 0;
}

.colony-mpub-remit-panel {
    margin: 8px 0;
    padding: 10px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
}

.colony-mpub-remit-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.colony-mpub-remit-manage {
    background: var(--card-bg);
    color: #1d4ed8;
    border: 1px solid #93c5fd;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}

.colony-mpub-remit-panel .colony-mpub-label {
    margin-top: 6px;
}

.colony-mpub-ship-fee-panel {
    margin: 8px 0;
    padding: 10px 12px;
    background: var(--warn-bg);
    border: 1px solid #fed7aa;
    border-radius: 8px;
}

.colony-mpub-ship-fee-panel .colony-mpub-label {
    margin-top: 6px;
    color: #b45309;
}

.colony-mpub-bank-combo {
    position: relative;
    margin-bottom: 4px;
}

.colony-mpub-bank-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    max-height: 220px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    margin-top: 4px;
}

.colony-mpub-current-img {
    margin-bottom: 8px;
}

.colony-mpub-current-img img {
    max-width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.colony-mpub-type-tab--locked {
    opacity: 0.55;
    cursor: not-allowed;
}

.colony-mfeat-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0.4rem 0;
}

.colony-mfeat-options span {
    padding: 3px 8px;
    border: 1px solid #bae6fd;
    border-radius: 999px;
    background: var(--info-bg);
    color: #0369a1;
    font-size: 0.75rem;
    font-weight: 700;
}

.colony-mfeat-buybox {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid #e2e8f0;
}

.colony-mfeat-buybox input {
    flex: 1;
    min-width: 80px;
}

.colony-mpub-section--lfg {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    padding: 0.85rem;
}

.colony-mpub-lfg-dates {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

.colony-mpub-lfg-date-btn {
    border: 1px solid #a7f3d0;
    background: var(--card-bg);
    color: #047857;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    white-space: nowrap;
    cursor: pointer;
}

.colony-mpub-lfg-date-btn.active {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}

.colony-mpub-lfg-preview {
    margin-top: 8px;
    padding: 8px 10px;
    background: #d1fae5;
    border: 1px dashed #34d399;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #065f46;
}

.colony-mpub-lfg-loc-btn.active {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}

.colony-mpub-label--sm {
    font-size: 0.72rem;
    color:var(--text-muted);
}

.colony-mpub-quill-wrap {
    position: relative;
}

.colony-mpub-quill-wrap .ql-toolbar {
    border-radius: 8px 8px 0 0;
}

.colony-mpub-quill-wrap .ql-container {
    border-radius: 0 0 8px 8px;
    min-height: 120px;
    max-height: 220px;
    overflow-y: auto;
    font-size: 0.9rem;
}

.colony-mpub-quill-hashtag-popup {
    z-index: 50;
    max-height: 220px;
    overflow-y: auto;
    width: min(240px, 100%);
    background: var(--card-bg);
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.colony-mpub-quill-hashtag-popup .game-tag-suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    background: var(--card-bg);
    cursor: pointer;
    font-size: 13px;
    color:var(--text-main);
    font-weight: 600;
}

.colony-mpub-quill-hashtag-popup .game-tag-suggest-item.is-active,
.colony-mpub-quill-hashtag-popup .game-tag-suggest-item:hover {
    background: var(--info-bg);
}

.colony-mpub-content-textarea-rel {
    position: relative;
}

.colony-mpub-content-textarea-rel .game-tag-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    max-height: 220px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    margin-top: 4px;
}

.colony-mpub-content-textarea-rel .game-tag-suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    background: var(--card-bg);
    cursor: pointer;
    font-size: 13px;
    color:var(--text-main);
    font-weight: 600;
}

.colony-mpub-content-textarea-rel .game-tag-suggest-item.is-active,
.colony-mpub-content-textarea-rel .game-tag-suggest-item:hover {
    background: var(--info-bg);
}

.colony-mpub-tag-btn.is-selected {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
}

.colony-mpub-theme-anonymous .colony-mpub-post-type-tab.active {
    background: #ede9fe;
    border-color: #a78bfa;
    color: #6d28d9;
}

.colony-mpub-theme-lfg .colony-mpub-post-type-tab.active {
    background: #d1fae5;
    border-color: #34d399;
    color: #047857;
}

.colony-mpub-theme-draw .colony-mpub-post-type-tab.active {
    background: var(--warn-bg);
    border-color: #fcd34d;
    color: #92400e;
}

/* ??????????? */
.colony-mfeat-muted {
    color:var(--text-muted);
    font-size: 0.8rem;
}

.colony-mfeat-post-html {
    font-size: 0.88rem;
    line-height: 1.55;
    color:var(--text-main);
    margin: 0.5rem 0;
    word-break: break-word;
}

.colony-mfeat-post-html p { margin: 0.35rem 0; }

.colony-mfeat-lfg-block {
    margin: 0.5rem 0;
    padding: 0.7rem 0.8rem;
    background: var(--ok-bg);
    border: 1px solid var(--ok-border);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--ok-text);
}

.colony-mfeat-lfg-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
    color: var(--ok-text);
}

.colony-mfeat-lfg-loc {
    color: var(--ok-text);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed var(--ok-border);
}

.colony-mfeat-lfg-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.colony-mfeat-lfg-tag {
    background: color-mix(in srgb, var(--ok-text) 16%, var(--ok-bg));
    color: var(--ok-text);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid var(--ok-border);
}

.colony-mfeat-poll-block {
    margin: 0.5rem 0;
    padding: 0.7rem 0.8rem;
    background: var(--danger-bg);
    border: 1px dashed #fecdd3;
    border-radius: 8px;
}

.colony-mfeat-poll-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #be123c;
    font-size: 0.85rem;
}

.colony-mfeat-poll-type {
    font-size: 0.72rem;
    background: #fda4af;
    color: #fff;
    padding: 2px 6px;
    border-radius: 999px;
}

.colony-mfeat-poll-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--card-bg);
    border: 1px solid #fda4af;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.82rem;
    cursor: pointer;
}

.colony-mfeat-poll-result {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.82rem;
    border-bottom: 1px solid #fecdd3;
}

.colony-mfeat-poll-total {
    text-align: right;
    font-size: 0.75rem;
    color:var(--text-muted);
    margin-top: 4px;
}

.colony-mfeat-comments {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
}

.colony-mfeat-comments-head {
    font-size: 0.8rem;
    font-weight: 700;
    color:var(--text-muted);
    margin-bottom: 6px;
}

.colony-mfeat-comment {
    padding: 6px 0;
    font-size: 0.8rem;
    border-bottom: 1px solid #f1f5f9;
}

.colony-mfeat-comment--reply {
    padding-left: 4px;
}

.colony-mfeat-replies {
    margin: 0 0 6px 14px;
    padding-left: 10px;
    border-left: 3px solid #cbd5e1;
}

.colony-mfeat-comment-reply {
    border: none;
    background: transparent;
    color:var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-top: 2px;
}

.colony-mfeat-reply-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 6px;
}

.colony-mfeat-reply-cancel {
    border: none;
    background: transparent;
    color: #0284c7;
    font-weight: 700;
    cursor: pointer;
}

.colony-mfeat-comment-time {
    font-size: 0.72rem;
    color:var(--text-muted);
    margin-left: 6px;
}

.colony-mfeat-comment p {
    margin: 4px 0 0;
    color:var(--text-main);
}

.colony-mfeat-comment-form {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.colony-mfeat-comment-form input {
    flex: 1;
}

@media (max-width: 520px) {
    .colony-mpub-two-col {
        grid-template-columns: 1fr;
    }

    .colony-mpub-option-row {
        grid-template-columns: 1fr;
    }
}

.colony-mticket-settings-hint,
.colony-mticket-usage-hint {
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
    line-height: 1.45;
}

.colony-mticket-usage-hint {
    color: #b45309;
    background: var(--warn-bg);
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
}

.colony-mticket-section {
    margin-bottom: 1rem;
}

.colony-mticket-category-row,
.colony-mticket-template-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

.colony-mticket-field {
    min-width: 100px;
    flex: 1;
}

.colony-mticket-field--grow {
    flex: 2;
    min-width: 140px;
}

.colony-mticket-field--narrow {
    flex: 0 0 72px;
    min-width: 72px;
}

.colony-mticket-default-badge {
    font-size: 0.7rem;
    color:var(--text-muted);
    padding-bottom: 0.35rem;
}

.colony-mticket-next-serial {
    font-size: 0.72rem;
    color:var(--text-muted);
    margin-top: 0.35rem;
}

.colony-mmember-ticket-cat {
    font-size: 0.75rem;
    color:var(--text-muted);
    margin: 0.15rem 0 0.25rem;
}

.colony-mmember-ticket-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.45rem 0.55rem;
    margin-bottom: 0.4rem;
    background: var(--card-bg);
}

.colony-mmember-ticket-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
}

.colony-mmember-ticket-top-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-width: 0;
}

.colony-mmember-ticket-cat-badge {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.12rem 0.4rem;
    border-radius: 5px;
    flex-shrink: 0;
}

.colony-mmember-ticket-cat-badge--points {
    background: var(--warn-bg);
    color: #a16207;
}

.colony-mmember-ticket-cat-badge--discount {
    background: #dcfce7;
    color: #15803d;
}

.colony-mmember-ticket-cat-badge--lottery {
    background: #ede9fe;
    color: #6d28d9;
}

.colony-mmember-ticket-cat-badge--default {
    background: var(--bg-surface);
    color:var(--text-muted);
}

.colony-mmember-ticket-action {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.2;
}

.colony-mmember-ticket-action--redeem {
    background: #0f172a;
    color: #fff;
    border-color:var(--text-main);
}

.colony-mmember-ticket-action--revoke {
    background: var(--card-bg);
    color:var(--text-muted);
    border-color: #cbd5e1;
}

.colony-mmember-ticket-status {
    font-size: 0.68rem;
    font-weight: 600;
    color:var(--text-muted);
    flex-shrink: 0;
}

.colony-mmember-ticket-status--active {
    color:var(--text-muted);
}

.colony-mmember-ticket-status--used {
    color: #16a34a;
}

.colony-mmember-ticket-status--revoked {
    color: #dc2626;
}

.colony-mmember-ticket-status--expired {
    color:var(--text-muted);
}

.colony-mmember-ticket-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

.colony-mmember-ticket-row + .colony-mmember-ticket-row {
    margin-top: 0.15rem;
}

.colony-mmember-ticket-name {
    font-weight: 700;
    color:var(--text-main);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.colony-mmember-ticket-date {
    color:var(--text-muted);
    font-size: 0.72rem;
    flex-shrink: 0;
}

.colony-mmember-ticket-code {
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color:var(--text-main);
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.colony-mmember-ticket-serial {
    font-size: 0.72rem;
    color:var(--text-muted);
    flex-shrink: 0;
}

.colony-mmember-tabs .merchant-preview-tab {
    font-size: 0.78rem;
    padding: 0.45rem 0.5rem;
    white-space: nowrap;
}

.colony-mtier-settings {
    padding: 0.25rem 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

.colony-mtier-settings #colonyMtierList {
    max-height: min(42vh, 360px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
    margin-bottom: 0.75rem;
}

.colony-mtier-settings #colonyMtierSaveBtn {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 1;
}

.colony-mtier-hint {
    margin-bottom: 0.75rem;
}

.colony-mtier-section {
    margin-bottom: 1rem;
}

.colony-mtier-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.colony-mtier-section-head h3 {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 800;
    color:var(--text-main);
}

.colony-mtier-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

.colony-mtier-field {
    min-width: 90px;
    flex: 1;
}

.colony-mtier-field--grow {
    flex: 2;
    min-width: 120px;
}

.colony-mtier-field--narrow {
    max-width: 110px;
    flex: 0 1 110px;
}

.colony-mtier-row {
    margin-bottom: 0.5rem;
}

#colony-merchant-members-modal {
    z-index: 13150;
    align-items: center;
    justify-content: center;
    padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    box-sizing: border-box;
}

#colony-merchant-members-modal .colony-mmember-modal {
    display: flex;
    flex-direction: column;
    width: min(560px, 94vw);
    max-width: 560px;
    max-height: min(90vh, calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
}

#colony-merchant-members-modal .colony-mmember-modal > h2,
#colony-merchant-members-modal .colony-mmember-modal > .description,
#colony-merchant-members-modal .colony-mmember-tabs,
#colony-merchant-members-modal #colonyMmemberModalDismiss {
    flex-shrink: 0;
}

.colony-mmember-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 2px;
}

#colony-merchant-members-modal #colonyMmemberModalDismiss {
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.colony-mcenter-overlay {
    z-index: 12400;
    display: none;
    align-items: center;
    justify-content: center;
}

.colony-mcenter-content {
    max-width: 420px;
    width: 94%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    padding: 1.75rem 1.5rem 1.5rem;
    position: relative;
}

.colony-mcenter-content--wide {
    max-width: 480px;
    text-align: left;
}

.colony-mcenter-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--bg-surface);
    color:var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
}

.colony-mcenter-title {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 800;
    color:var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.colony-mcenter-hint {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: #b45309;
    background: var(--warn-bg);
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
}

.colony-mcenter-photo-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.colony-mcenter-photo {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid #e0f2fe;
    object-fit: cover;
}

.colony-mcenter-photo-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #0ea5e9;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.colony-mcenter-label {
    display: block;
    text-align: left;
    font-size: 0.75rem;
    color:var(--text-muted);
    margin-bottom: 0.35rem;
}

.colony-mcenter-input {
    width: 100%;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

.colony-mcenter-stats {
    background: var(--bg-surface);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 0.82rem;
    margin-bottom: 1rem;
    line-height: 1.55;
}

.colony-mcenter-role {
    color: #0ea5e9;
    font-weight: 800;
}

.colony-mcenter-vip-row {
    margin-top: 0.35rem;
}

.colony-mcenter-divider {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 0.65rem 0;
}

.colony-mcenter-rep-total {
    color: #f59e0b;
    font-weight: 800;
    font-size: 1rem;
}

.colony-mcenter-meta {
    font-size: 0.75rem;
    color:var(--text-muted);
}

.colony-mcenter-wallet {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
}

.colony-mcenter-wallet-balance {
    color: #ef4444;
    font-weight: 800;
    font-size: 1.05rem;
}

.colony-mcenter-barcode {
    background: var(--warn-bg);
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: 0.85rem;
    margin-bottom: 0.85rem;
}

.colony-mcenter-barcode-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #b45309;
    margin-bottom: 0.5rem;
}

.colony-mcenter-barcode-img-wrap {
    background: var(--card-bg);
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 0.35rem;
    display: inline-block;
    margin-bottom: 0.35rem;
}

.colony-mcenter-barcode-img-wrap img {
    width: 140px;
    height: 140px;
    display: block;
}

.colony-mcenter-footnote {
    font-size: 0.72rem;
    color:var(--text-muted);
    line-height: 1.45;
    margin: 0 0 0.85rem;
    text-align: left;
}

.colony-mcenter-desc {
    font-size: 0.78rem;
    color:var(--text-muted);
    margin: 0 0 0.85rem;
    line-height: 1.5;
}

.colony-mcenter-muted {
    font-size: 0.8rem;
    color:var(--text-muted);
    padding: 0.5rem 0;
}

.colony-mcenter-error {
    font-size: 0.8rem;
    color: #ef4444;
}

.colony-mcenter-merchant-list {
    max-height: 55vh;
    overflow-y: auto;
}

.colony-mcenter-merchant-card {
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.colony-mcenter-merchant-shop {
    font-weight: 800;
    color: #b45309;
    font-size: 0.92rem;
    margin-bottom: 0.35rem;
}

.colony-mcenter-pts {
    color: #f59e0b;
}

.colony-mcenter-tickets {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #e2e8f0;
}

.colony-mcenter-tickets-title {
    font-size: 0.72rem;
    font-weight: 800;
    color:var(--text-muted);
    margin-bottom: 0.35rem;
}

.colony-mcenter-ticket-card {
    background: var(--warn-bg);
    border: 1px solid #fde68a;
}

.colony-mcenter-ticket-card.colony-mmember-ticket-card {
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.3rem;
}

.colony-mcenter-ticket-group {
    margin-bottom: 0.45rem;
}

.colony-mcenter-ticket-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-bottom: 0.3rem;
}

.colony-mcenter-ticket-nav-btn {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    border: 1px solid #fcd34d;
    background: var(--warn-bg);
    color: #b45309;
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.colony-mcenter-ticket-nav-btn:hover {
    background: var(--warn-bg);
}

.colony-mcenter-ticket-counter {
    font-size: 0.7rem;
    color:var(--text-muted);
    font-weight: 700;
    min-width: 3rem;
    text-align: center;
}

.colony-mcenter-ticket-card.is-used {
    background: var(--bg-surface);
    border-color: #e2e8f0;
    opacity: 0.88;
}

.colony-menu-item-btn--merchant {
    background: var(--warn-bg);
    color: #b45309;
}

.colony-menu-item-btn--logout {
    background: var(--danger-bg);
    color: #e11d48;
}

body.colony-mcenter-open {
    overflow: hidden;
}

.colony-merchant-embed-shell[hidden] {
    display: none !important;
}

.colony-merchant-embed-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: max(0.65rem, env(safe-area-inset-top, 0px)) 0.85rem 0.65rem;
    background: var(--card-bg);
    border-bottom: 2px solid #0f172a;
    box-shadow: 0 4px 0 rgba(15, 23, 42, 0.08);
}

.colony-merchant-embed-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 2px solid #0f172a;
    border-radius: 999px;
    background: var(--card-bg);
    color:var(--text-main);
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
}

.colony-merchant-embed-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #b45309;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.colony-merchant-embed-frame {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: none;
    background: var(--card-bg);
}

.colony-merchant-embed-frame[hidden],
.colony-merchant-native-body[hidden] {
    display: none !important;
}

.colony-merchant-native-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-surface);
}

.colony-mfeat-panel {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.colony-mfeat-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1rem 1.1rem;
    border-bottom: 2px solid #0f172a;
    background: var(--card-bg);
}

.colony-mfeat-panel-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color:var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.colony-mfeat-panel--shop .colony-mfeat-panel-head {
    background: var(--warn-bg);
    border-bottom-color: #fde68a;
}

.colony-mfeat-panel--shop .colony-mfeat-panel-head h2 {
    color: #92400e;
}

.colony-mfeat-panel--post .colony-mfeat-panel-head {
    background: var(--danger-bg);
    border-bottom-color: #fecdd3;
}

.colony-mfeat-panel--post .colony-mfeat-panel-head h2 {
    color: #be123c;
}

.colony-mfeat-tabs,
.colony-mfeat-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border-bottom: 1px solid #e2e8f0;
}

.colony-mfeat-tab,
.colony-mfeat-tag-btn {
    border: 2px solid #cbd5e1;
    border-radius: 999px;
    background: var(--card-bg);
    color:var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
}

.colony-mfeat-tab.active,
.colony-mfeat-tag-btn.active {
    background: #0f172a;
    border-color:var(--text-main);
    color: #fff;
}

.colony-mfeat-panel--shop .colony-mfeat-tab.active {
    background: #f59e0b;
    border-color: #f59e0b;
}

.colony-mfeat-panel--post .colony-mfeat-tag-btn.active {
    background: #f43f5e;
    border-color: #f43f5e;
}

.colony-mfeat-hint {
    margin: 0;
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
    color: #92400e;
    background: var(--warn-bg);
    border-bottom: 1px solid #fde68a;
}

.colony-mfeat-list {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.colony-mfeat-card {
    background: var(--card-bg);
    border: 2px solid #0f172a;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    box-shadow: 3px 3px 0 rgba(15, 23, 42, 0.08);
}

.colony-mfeat-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
}

.colony-mfeat-badge {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
}

.colony-mfeat-badge--shop {
    background: var(--warn-bg);
    color: #b45309;
}

.colony-mfeat-badge--pin {
    background: #dbeafe;
    color: #1d4ed8;
}

.colony-mfeat-date,
.colony-mfeat-author {
    margin-left: auto;
    font-size: 0.72rem;
    color:var(--text-muted);
}

.colony-mfeat-card-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 800;
    color:var(--text-main);
}

.colony-mfeat-price {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ea580c;
    margin-bottom: 0.35rem;
}

.colony-mfeat-desc,
.colony-mfeat-post-text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color:var(--text-muted);
    white-space: pre-wrap;
}

.colony-mfeat-meta {
    font-size: 0.75rem;
    color:var(--text-muted);
    margin-top: 0.35rem;
}

.colony-mfeat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.colony-mfeat-tag {
    font-size: 0.72rem;
    background: var(--bg-surface);
    color:var(--text-muted);
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
}

.colony-mfeat-actions {
    margin-top: 0.65rem;
    display: flex;
    gap: 0.5rem;
}

.colony-mfeat-empty,
.colony-mfeat-loading,
.colony-mfeat-denied {
    text-align: center;
    padding: 2.5rem 1.25rem;
    color:var(--text-muted);
}

.colony-mfeat-denied i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    color:var(--text-muted);
}

.colony-mfeat-denied strong {
    display: block;
    color:var(--text-main);
    margin-bottom: 0.35rem;
}

.colony-mfeat-panel--members .colony-mfeat-panel-head {
    background: #ecfdf5;
    border-bottom-color: #6ee7b7;
}

.colony-mfeat-panel--members .colony-mfeat-panel-head h2 {
    color: #047857;
}

.colony-mfeat-panel--members.colony-mfeat-panel--tickets .colony-mfeat-panel-head {
    background: var(--warn-bg);
    border-bottom-color: #fde68a;
}

.colony-mfeat-panel--members.colony-mfeat-panel--tickets .colony-mfeat-panel-head h2 {
    color: #b45309;
}

.colony-mfeat-panel--members .colony-mfeat-hint {
    color: #047857;
    background: #ecfdf5;
    border-bottom-color: #a7f3d0;
}

.colony-mfeat-panel--members.colony-mfeat-panel--tickets .colony-mfeat-hint {
    color: #b45309;
    background: var(--warn-bg);
    border-bottom-color: #fde68a;
}

.colony-mmember-scan-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--card-bg);
    border-bottom: 1px solid #e2e8f0;
}

.colony-mmember-scan-row .lib-settings-text-input {
    flex: 1;
    min-width: 10rem;
}

.colony-mmember-detail {
    margin: 0 1rem;
    padding: 0.85rem 1rem;
    background: var(--card-bg);
    border: 2px solid #0f172a;
    border-radius: 14px;
    box-shadow: 3px 3px 0 rgba(15, 23, 42, 0.08);
}

.colony-mmember-detail-name {
    font-size: 1.05rem;
    font-weight: 800;
    color:var(--text-main);
    margin-bottom: 0.35rem;
}

.colony-mmember-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    font-size: 0.85rem;
    color:var(--text-muted);
}

.colony-mmember-points {
    color: #059669;
    font-size: 1.05rem;
}

.colony-mmember-uid {
    margin-top: 0.45rem;
    font-size: 0.72rem;
    color:var(--text-muted);
    word-break: break-all;
}

.colony-mmember-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color:var(--text-muted);
    margin-bottom: 0.45rem;
}

.colony-mmember-points-panel,
.colony-mmember-issue-panel {
    margin: 0.85rem 1rem 0;
    padding: 0.85rem 1rem;
    background: var(--bg-surface);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.colony-mmember-points-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.colony-mmember-delta-input {
    width: 5.5rem;
    text-align: center;
}

.colony-mmember-tickets-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1rem 0;
}

.colony-mmember-tickets-head h3 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    color:var(--text-main);
}

.colony-mmember-issue-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.colony-mmember-issue-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    text-align: left;
    min-width: 7rem;
}

.colony-mmember-issue-btn-name {
    font-weight: 800;
}

.colony-mmember-issue-btn-meta {
    font-size: 0.72rem;
    color:var(--text-muted);
    font-weight: 500;
}

.colony-mmember-templates {
    padding: 0.85rem 1rem 1.25rem;
}

.colony-mmember-templates h3 {
    margin: 0 0 0.65rem;
    font-size: 0.92rem;
    font-weight: 800;
    color:var(--text-main);
}

.colony-mmember-template-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.85rem;
}

.colony-mmember-template-row strong {
    color:var(--text-main);
}

.colony-mmember-template-row span {
    color:var(--text-muted);
}

.colony-mfeat-card--ticket .colony-mfeat-badge--shop {
    background: var(--warn-bg);
    color: #a16207;
}

/*
 * Merchant shell ? restore v1.300 proven layout (pre-1.306 flex / pre-1.308?1.309
 * padding/clearance-as-height regressions).
 * Shell is position:fixed with top + bottom edges; available height = bottom ? top
 * (never padding that can eat the whole viewport). Pills sit above as fixed overlay.
 * --colony-desktop-subpill-h is clamped in JS (?96px) so a bad rect cannot zero height.
 */
body.colony-merchant-embed-active {
    overflow: hidden;
    padding-left: 0 !important;
}

body.colony-merchant-embed-active .colony-remote-container,
body.colony-merchant-embed-active #colony-embed-mobile-fabs {
    display: none !important;
}

body.colony-merchant-embed-active .colony-embed-lib-bar,
body.colony-merchant-embed-active .colony-embed-lib-picker,
body.colony-merchant-embed-active .colony-sticky-bar,
body.colony-merchant-embed-active .main-header,
body.colony-merchant-embed-active .main-content,
body.colony-merchant-embed-active #libraryView,
body.colony-merchant-embed-active #lobbyView,
body.colony-merchant-embed-active .sidebar {
    display: none !important;
}

body.colony-merchant-embed-active .sub-pill-bar {
    position: fixed !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 13050;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
    background: color-mix(in srgb, var(--bg-main, #0f172a) 94%, transparent);
    display: flex !important;
    visibility: visible !important;
}

/* Proven: position edges ? height auto between top and bottom (non-zero) */
body.colony-merchant-embed-active .colony-merchant-embed-shell {
    position: fixed !important;
    top: var(--colony-desktop-subpill-h, 58px) !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    z-index: 12000;
    background: var(--bg-surface);
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

@media (max-width: 800px) {
    html:not(.tm-embedded) body.colony-merchant-embed-active .sub-pill-bar {
        top: auto !important;
        bottom: 0 !important;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
        padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right));
    }
    html:not(.tm-embedded) body.colony-merchant-embed-active .colony-merchant-embed-shell {
        top: 0 !important;
        bottom: var(--colony-mobile-tabbar-offset, 3.75rem) !important;
        padding: 0 !important;
    }
    /* standalone chrome: shell below top bar so panel title is not clipped */
    html.tm-colony-standalone body.colony-merchant-embed-active .colony-merchant-embed-shell {
        top: var(--colony-main-chrome-h, 56px) !important;
        bottom: var(--colony-mobile-tabbar-offset, 3.75rem) !important;
    }
}

html.tm-embedded body.colony-merchant-embed-active .colony-merchant-embed-shell {
    top: var(--colony-desktop-subpill-h, 58px) !important;
    bottom: 0 !important;
    padding: 0 !important;
}

@media (min-width: 801px) {
    body.colony-merchant-embed-active .sub-pill-bar {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 13050;
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
        padding: 8px 12px;
    }

    body.colony-merchant-embed-active .colony-merchant-embed-shell {
        top: var(--colony-desktop-subpill-h, 58px);
        bottom: 0;
        height: auto;
        padding: 0 !important;
    }

    html.tm-colony-standalone body.colony-merchant-embed-active .sub-pill-bar {
        top: var(--colony-main-chrome-h, 56px) !important;
    }

    html.tm-colony-standalone body.colony-merchant-embed-active .colony-merchant-embed-shell {
        top: calc(var(--colony-main-chrome-h, 56px) + var(--colony-desktop-subpill-h, 58px)) !important;
        bottom: 0 !important;
        padding: 0 !important;
    }
}

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

.lobby-library-cover-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(15, 118, 110, 0.35);
}

.lobby-library-count {
    position: absolute;
    right: 0.65rem;
    bottom: 0.65rem;
    padding: 0.25rem 0.55rem;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    backdrop-filter: blur(4px);
}

.lobby-library-body {
    padding: 0.85rem 0.95rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.lobby-library-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--text-main, #2d3436);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.lobby-library-owner {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.lobby-library-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #e2e8f0;
    flex-shrink: 0;
}

.lobby-library-owner-name {
    font-size: 0.8rem;
    color:var(--text-muted);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lobby-library-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lobby-library-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: var(--info-bg);
    color: var(--info-text);
    font-size: 0.7rem;
    font-weight: 800;
    border: 1px solid var(--info-border);
}

.lobby-library-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: var(--bg-surface);
    color:var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    border: 1px solid var(--border-soft);
}

.lobby-library-stat i {
    color:var(--text-muted);
    font-size: 0.68rem;
}

.lobby-grid .empty-state {
    width: 100%;
}

@media (max-width: 640px) {
    .lobby-grid.card-mode {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .lobby-grid.list-mode .lobby-library-cover,
    .lobby-grid:not(.card-mode) .lobby-library-cover {
        width: 88px;
        min-width: 88px;
    }

    .lobby-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .lobby-toolbar-right {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex: 0 0 auto;
    }

    .lobby-manage-actions {
        width: 100%;
    }

    .lobby-manage-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .lobby-search-wrap {
        max-width: none;
        width: 100%;
        flex: 0 0 auto;
        align-self: stretch;
    }

    .lobby-search-input {
        height: 38px;
        font-size: 0.85rem;
    }
}

/* SVG ????????????????????*/
.colony-dice-svg {
    width: 48px;
    height: 48px;
    display: block;
}
.colony-dice-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.card-img--placeholder.colony-dice-placeholder,
.detail-img--placeholder.colony-dice-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
}
.lobby-library-cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e2e8f0, #f8fafc);
}
.lobby-library-cover-fallback .colony-dice-svg {
    width: 56px;
    height: 56px;
}
.empty-state .colony-dice-placeholder .colony-dice-svg {
    width: 64px;
    height: 64px;
    opacity: 0.55;
}

/* ???}?E???a??]????D???a??G????C???????A???t????^ */
.colony-lobby-map-host {
    margin: 0 0 1rem;
}
.colony-lobby-map-wrap {
    border: 1px solid var(--border-soft, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card-bg, #fff);
}
.colony-lobby-map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-soft, #e2e8f0);
}
.colony-lobby-map-wrap.is-collapsed .colony-lobby-map-head {
    border-bottom: none;
}
.colony-lobby-map-head h3 {
    margin: 0;
    font-size: 0.95rem;
}
.colony-lobby-map-head-right {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}
.colony-lobby-map-count {
    font-size: 0.8rem;
    color:var(--text-muted);
}
.colony-lobby-map-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1.5px solid var(--text-main, #2d3436);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-main, #2d3436);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.28rem 0.7rem;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--text-main, #2d3436);
}
.colony-lobby-map-toggle:hover {
    background: var(--bg-surface);
}
.colony-lobby-map-body {
    display: block;
}
.colony-lobby-map-wrap.is-collapsed .colony-lobby-map-body {
    display: none;
}
.colony-lobby-map-layout {
    display: flex;
    height: min(420px, 55vh);
    min-height: 280px;
}
.colony-lobby-map-sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-right: 1px solid #e2e8f0;
    min-height: 0;
}
.colony-lobby-map-search-wrap {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.colony-lobby-map-search-wrap > i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color:var(--text-muted);
    font-size: 0.75rem;
    pointer-events: none;
}
.colony-lobby-map-search {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px 8px 30px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.8rem;
    background: var(--card-bg);
}
.colony-lobby-map-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 6px;
}
.colony-lobby-map-list-empty {
    padding: 16px 10px;
    text-align: center;
    color:var(--text-muted);
    font-size: 0.8rem;
}
.colony-lobby-map-list-item {
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-left: 3px solid #2563eb;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.colony-lobby-map-list-item:hover {
    background: var(--bg-surface);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}
.colony-lobby-map-list-title {
    font-weight: 700;
    font-size: 0.88rem;
    color:var(--text-main);
    margin-bottom: 4px;
}
.colony-lobby-map-list-loc {
    font-size: 0.72rem;
    color:var(--text-muted);
    margin-bottom: 2px;
}
.colony-lobby-map-list-desc {
    font-size: 0.72rem;
    color: #2563eb;
    margin-bottom: 8px;
}
.colony-lobby-map-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.colony-lobby-map-list-btn {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: var(--card-bg);
    color:var(--text-main);
    cursor: pointer;
}
.colony-lobby-map-list-btn:hover {
    background: var(--border-soft);
}
.colony-lobby-map-list-btn--copy {
    color: #0f766e;
    border-color: #99f6e4;
}
.colony-lobby-map-main {
    flex: 1;
    min-width: 0;
    position: relative;
}
.colony-lobby-map-canvas {
    height: 100%;
    width: 100%;
    min-height: 220px;
}
.colony-lobby-map-empty {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 500;
    padding: 10px 12px;
    margin: 0;
    font-size: 0.85rem;
    color:var(--text-muted);
    background: color-mix(in srgb, var(--card-bg) 92%, transparent);
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
.colony-lobby-map-popup h4 {
    margin: 0 0 8px 0;
    color:var(--text-main);
    font-size: 15px;
}
.colony-lobby-map-popup-loc {
    margin: 0 0 6px 0;
    color:var(--text-muted);
    font-size: 12px;
}
.colony-lobby-map-popup-desc {
    margin: 0 0 8px 0;
    color:var(--text-muted);
    font-size: 12px;
}
.colony-lobby-map-popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.colony-lobby-map-popup-btn {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: var(--card-bg);
    color:var(--text-main);
    cursor: pointer;
    text-decoration: none;
}
.colony-lobby-map-popup-btn--primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.colony-lobby-map-popup-btn--link {
    color: #0f766e;
}
.colony-lobby-map-pin-dot {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.colony-lobby-map-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #7c3aed;
    background: #ede9fe;
    padding: 1px 6px;
    border-radius: 6px;
}
@media (max-width: 700px) {
    .colony-lobby-map-layout {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }
    .colony-lobby-map-sidebar {
        width: 100%;
        max-height: 180px;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
    .colony-lobby-map-canvas {
        height: 240px;
    }
}
.lobby-library-certified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #7c3aed;
    margin-top: 2px;
}

/* ????? */
.colony-store-certified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #7c3aed;
    background: #ede9fe;
    padding: 4px 10px;
    border-radius: 999px;
    margin-left: auto;
}
.colony-mfeat-panel-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.colony-storeinfo-map {
    margin: 12px 0;
    min-height: 0;
    height: 0;
}

.colony-storeinfo-map.is-map-ready,
.colony-storeinfo-map.is-map-loading {
    display: block !important;
    height: 180px;
    min-height: 180px;
}

.colony-storeinfo-map.is-map-loading {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--bg-surface);
    color:var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    border: 2px solid var(--text-main);
    border-radius: 12px;
}

.colony-storeinfo-tabs {
    margin-top: 8px;
}
.colony-storeinfo-panel {
    margin-top: 8px;
}
.colony-store-certified-note {
    margin: 12px 0 0;
    font-size: 0.82rem;
    color:var(--text-muted);
    line-height: 1.5;
}

/* ????????????????????????? min-height:100% ?????? */
.colony-mfeat-panel--storeinfo {
    min-height: 0;
    padding-bottom: 0.5rem;
}

/* Content gutter only ? never used as viewport clearance (cannot zero shell height) */
body.colony-merchant-embed-active .colony-merchant-native-body {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 4px;
    padding-bottom: calc(var(--colony-mobile-tabbar-offset, 3.1rem) + 12px);
}

/* ?????? */
.count-banner.colony-inv-limit--full {
    background: var(--danger-bg);
    color: #b91c1c;
}
.count-banner.colony-inv-limit--near {
    background: var(--warn-bg);
    color: #b45309;
}
.colony-inv-certified {
    color: #7c3aed;
    font-weight: 700;
}

/* ??????? inline ?? */
.inline-ad-card {
    background: linear-gradient(180deg, #f8fafc, #fff);
    border: 1.5px dashed #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 4px 0;
    box-sizing: border-box;
    grid-column: 1 / -1;
}
.inline-ad-card__label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color:var(--text-muted);
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.inline-ad-card__body .adsbygoogle {
    display: block;
    min-height: 110px;
    min-width: 1px;
}
.inline-ad-card--user {
    border-style: solid;
    border-color: #fde68a;
    background: linear-gradient(180deg, #fffbeb, #fff);
}
.user-ad-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.user-ad-card__inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.user-ad-card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 140px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--border-soft);
}
.user-ad-card__text {
    min-width: 0;
    flex: 1;
}
.user-ad-card__title {
    font-size: 14px;
    font-weight: 800;
    color:var(--text-main);
    margin-bottom: 4px;
    line-height: 1.35;
}
.user-ad-card__desc {
    font-size: 12px;
    color:var(--text-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- VIP ????CSS ????colony-vip-sync ????--- */
html[data-vip-theme] body.vip-theme {
    background: var(--bg-main) !important;
    color: var(--text-main);
}

html[data-vip-theme] .app-container,
html[data-vip-theme] .main-content,
html[data-vip-theme] #libraryView,
html[data-vip-theme] #lobbyView,
html[data-vip-theme] .colony-embed-lib-bar,
html[data-vip-theme] .sidebar,
html[data-vip-theme] .colony-sticky-bar,
html[data-vip-theme] .modal-content,
html[data-vip-theme] .game-card,
html[data-vip-theme] .lobby-library-card,
html[data-vip-theme] .games-grid,
html[data-vip-theme] .filters-panel,
html[data-vip-theme] .colony-remote-fab-menu {
    background: var(--card-bg, var(--bg-surface)) !important;
    color: var(--text-main);
    border-color: var(--border-soft, #e2e8f0);
}

html[data-vip-theme] .main-content,
html[data-vip-theme] #libraryView,
html[data-vip-theme] #lobbyView {
    background: var(--bg-main) !important;
}

html[data-vip-theme] .brand-logo-text,
html[data-vip-theme] .colony-embed-lib-title {
    color: var(--color-brand);
}

html[data-vip-theme] .btn-primary,
html[data-vip-theme] .sub-pill-btn.active {
    background: var(--color-brand) !important;
    border-color: var(--color-brand) !important;
}

html[data-vip-theme] .colony-vchat-msg--me .colony-vchat-msg-bubble {
    background: var(--color-brand);
    border-color: var(--color-brand);
}

html[data-vip-theme] .lib-switcher-card,
html[data-vip-theme] .lib-switcher-select-wrap,
html[data-vip-theme] .lib-action-btn,
html[data-vip-theme] .sort-menu-panel,
html[data-vip-theme] .sort-menu-trigger,
html[data-vip-theme] .colony-mobile-fab,
html[data-vip-theme] .colony-shelf-panel,
html[data-vip-theme] .colony-shelf-cab-tab {
    background: var(--card-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-soft, #e2e8f0) !important;
}
html[data-vip-theme] .cabinet-filter-panel-head,
html[data-vip-theme] .sort-menu-panel-head {
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--card-bg) 100%) !important;
    border-bottom-color: var(--border-soft) !important;
    color: var(--text-main) !important;
}
html[data-vip-theme] .lib-action-btn:hover:not(:disabled),
html[data-vip-theme] .colony-mobile-fab:hover,
html[data-vip-theme] .sort-menu-item:hover,
html[data-vip-theme] .sort-menu-item.is-selected {
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
}

.colony-vchat-msg-bubble--sticker {
    padding: 0.35rem;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.colony-vchat-sticker {
    max-width: 140px;
    max-height: 140px;
    display: block;
    border-radius: 10px;
}

.colony-mpub-vip-locked-hint {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color:var(--text-muted);
    line-height: 1.45;
}




/* ===== Colony shelf studio (2.5D bookshelf) ===== */
.colony-shelf-studio {
    margin: 0.75rem 0 1.5rem;
    padding: 0 0.25rem;
    user-select: none;
    -webkit-user-select: none;
}

.colony-shelf-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    justify-content: space-between;
}

.colony-shelf-cab-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.colony-shelf-cab-tab {
    border: 1px solid #cbd5e1;
    background: var(--bg-surface);
    color:var(--text-muted);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.colony-shelf-cab-tab.is-active {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.colony-shelf-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.colony-shelf-toolbar-actions .btn.is-active {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.colony-shelf-panel {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
}

.colony-shelf-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.55rem 0.75rem;
}

.colony-shelf-panel-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 12px;
    font-weight: 600;
    color:var(--text-muted);
}

.colony-shelf-panel-grid input {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.4rem 0.5rem;
    font-size: 14px;
    color:var(--text-main);
    background: var(--card-bg);
}

.colony-shelf-mat-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.colony-shelf-mat-label {
    font-size: 12px;
    font-weight: 700;
    color:var(--text-muted);
    margin-right: 0.25rem;
}

.colony-shelf-mat-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: var(--mat-swatch, #ccc);
    cursor: pointer;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
}

.colony-shelf-mat-btn.is-active {
    border-color: #0f766e;
    outline: 2px solid rgba(15, 118, 110, 0.25);
}

.colony-shelf-hint {
    margin: 0.65rem 0 0;
    font-size: 12px;
    color:var(--text-muted);
    line-height: 1.45;
}

.colony-shelf-danger {
    margin-top: 0.65rem;
    color: #b91c1c !important;
}

.colony-shelf-stage-wrap {
    overflow-x: auto;
    padding: 1.25rem 0.5rem 1rem;
    perspective: 900px;
}

.colony-shelf-cabinet {
    --cab-body: #c4a574;
    --cab-shelf: #a67c52;
    --cab-edge: #8b6914;
    --cab-width: 360px;
    --shelf-h: 136px;
    --top-h: 120px;
    width: var(--cab-width);
    min-width: 220px;
    margin: 0 auto;
    background: linear-gradient(90deg, var(--cab-edge) 0%, var(--cab-body) 8%, var(--cab-body) 92%, var(--cab-edge) 100%);
    border-radius: 6px 6px 4px 4px;
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.18),
        inset 0 0 0 3px rgba(0,0,0,0.12);
    padding: 10px 12px 0;
    transform: rotateX(4deg);
    transform-origin: center top;
    position: relative;
}

.colony-shelf-top {
    position: relative;
    z-index: 4;
    height: var(--top-h, 120px);
    margin: 0 -4px 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 4px 4px 0 0;
    background: transparent;
    cursor: zoom-in;
}
.colony-shelf-top.is-drop-target,
.colony-shelf-top-space.is-drop-target {
    outline: 2px dashed rgba(13, 148, 136, 0.7);
    outline-offset: -2px;
    border-radius: 4px;
}
.colony-shelf-top-space {
    position: relative;
    flex: 1 1 auto;
    min-height: 48px;
    margin: 0 8px;
    overflow: visible;
}
.colony-shelf-top-plank {
    flex: 0 0 auto;
    height: 12px;
    margin: 0 0 2px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent 55%), var(--cab-edge);
    box-shadow: 0 2px 0 rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.12);
    pointer-events: none;
}
.colony-shelf-edge {
    position: absolute;
    z-index: 5;
    background: rgba(14, 165, 233, 0.9);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
    border-radius: 3px;
}
.colony-shelf-edge--n {
    top: -5px;
    left: 50%;
    width: 36px;
    height: 10px;
    transform: translateX(-50%);
    cursor: ns-resize;
}
.colony-shelf-edge--s {
    bottom: -5px;
    left: 50%;
    width: 36px;
    height: 10px;
    transform: translateX(-50%);
    cursor: ns-resize;
}
.colony-shelf-edge--e {
    right: -5px;
    top: 50%;
    width: 10px;
    height: 36px;
    transform: translateY(-50%);
    cursor: ew-resize;
}
.colony-shelf-edge--w {
    left: -5px;
    top: 50%;
    width: 10px;
    height: 36px;
    transform: translateY(-50%);
    cursor: ew-resize;
}
.colony-shelf-orient-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.colony-shelf-orient-row .btn.is-active {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}
.btn.is-active-draw,
.colony-wb-draw-bar .btn.is-active {
    background: #0f766e !important;
    color: #fff !important;
    border-color: #0f766e !important;
}
.colony-wb-draw-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0 0 0.65rem;
    padding: 0.5rem 0.65rem;
    background: var(--warn-bg);
    border: 1px solid #fdba74;
    border-radius: 12px;
}
.colony-wb-draw-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 12px;
    font-weight: 700;
    color: #9a3412;
}
.colony-wb-draw-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    pointer-events: none;
    border-radius: inherit;
}
.colony-wb-stage.is-draw-mode .colony-wb-draw-canvas {
    pointer-events: auto;
}
.colony-wb-stage.is-draw-mode .colony-wb-block {
    pointer-events: none;
}

.colony-shelf-inner {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.08));
    border-radius: 2px;
    padding: 4px 6px 0;
    min-height: 120px;
}

.colony-shelf-row {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.colony-shelf-row-space {
    position: relative;
    flex: 1;
    min-height: 40px;
    transition: background 0.15s;
}

.colony-shelf-row-space.is-drop-target {
    background: rgba(45, 212, 191, 0.18);
    box-shadow: inset 0 0 0 2px rgba(13, 148, 136, 0.45);
}
.colony-shelf-row-space.is-drop-target.is-snap-mode {
    background: rgba(56, 189, 248, 0.22);
    box-shadow: inset 0 0 0 2px rgba(14, 165, 233, 0.65);
}

.colony-shelf-plank {
    height: 10px;
    border-radius: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent 40%), var(--cab-shelf);
    box-shadow:
        0 3px 0 var(--cab-edge),
        0 6px 10px rgba(0,0,0,0.25);
    margin-top: 2px;
}

.colony-shelf-base {
    height: 18px;
    margin: 8px -6px 0;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(180deg, var(--cab-shelf), var(--cab-edge));
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.colony-shelf-row-space.is-drop-target.is-depth-mode {
    background: rgba(251, 146, 60, 0.22);
    box-shadow: inset 0 0 0 2px rgba(234, 88, 12, 0.65);
}
.colony-shelf-box {
    position: absolute;
    bottom: 2px;
    border: none;
    padding: 0;
    cursor: grab;
    background: transparent;
    transform-style: preserve-3d;
    transform-origin: center bottom;
    z-index: 2;
}
.colony-shelf-box.is-flat .colony-shelf-box-spine {
    display: none;
}
.colony-shelf-box-rotate {
    position: absolute;
    left: -8px;
    top: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid #0ea5e9;
    color: #0369a1;
    cursor: grab;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: 0 2px 6px rgba(15,23,42,.25);
}

.colony-shelf-box:active,
.colony-shelf-box.is-dragging {
    cursor: grabbing;
    opacity: 0.85;
    z-index: 5;
}

.colony-shelf-box-face {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2px 3px 3px 2px;
    overflow: hidden;
    background: #1e293b;
    box-shadow:
        2px 0 0 rgba(0,0,0,0.2),
        4px 3px 8px rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.12);
}

.colony-shelf-box-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.colony-shelf-box-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color:var(--text-muted);
    font-size: 1rem;
}

.colony-shelf-box-spine {
    position: absolute;
    right: -3px;
    top: 1px;
    bottom: 1px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.35), rgba(255,255,255,0.15));
    pointer-events: none;
}

.colony-shelf-tray {
    margin-top: 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: var(--bg-surface);
    padding: 0.75rem;
    min-height: 72px;
}

/* ?????????????????? */
.colony-shelf-tray-backdrop {
    position: fixed;
    inset: 0;
    z-index: 12040;
    background: rgba(15, 23, 42, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.colony-shelf-tray-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.colony-shelf-tray--sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12050;
    margin: 0;
    max-height: min(48vh, 420px);
    border-radius: 18px 18px 0 0;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    background: var(--card-bg);
    box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.18);
    padding: 0.55rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform 0.22s ease;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.colony-shelf-tray--sheet.is-open {
    transform: translateY(0);
    pointer-events: auto;
}
.colony-shelf-tray-sheet-grab {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: #cbd5e1;
    margin: 0.15rem auto 0.55rem;
    flex-shrink: 0;
}
.colony-shelf-tray-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    flex-shrink: 0;
}
.colony-shelf-tray-sheet-head strong {
    font-size: 14px;
    color:var(--text-main);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.colony-shelf-tray-close {
    border: none;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    color:var(--text-muted);
    cursor: pointer;
    padding: 0.15rem 0.35rem;
}
.colony-shelf-tray--sheet .colony-shelf-tray-hint {
    margin: 0 0 0.55rem;
    font-size: 12px;
    color:var(--text-muted);
    flex-shrink: 0;
}
.colony-shelf-tray--sheet .colony-shelf-tray-list {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0.25rem;
}

/* ?????? FAB???????? */
.colony-shelf-place-fab {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 52px;
    height: 52px;
    padding: 0 0.85rem;
    border-radius: 16px;
    border: 2px solid var(--text-main, #0f172a);
    background: #0f766e;
    color: #fff;
    box-shadow: var(--shadow-flat-lg, 0 8px 20px rgba(15, 23, 42, 0.18));
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    font-weight: 700;
    font-size: 13px;
    z-index: 1;
}
.colony-shelf-place-fab i {
    font-size: 1.15rem;
}
.colony-shelf-place-fab.is-open {
    background: #115e59;
}
.colony-shelf-place-fab-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #f59e0b;
    color: #111827;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}
body.colony-shelf-dragging .colony-shelf-tray-backdrop {
    pointer-events: none !important;
}
body.colony-shelf-dragging .colony-shelf-tray--sheet {
    /* ????????????????? drop */
    pointer-events: none;
}
body.colony-shelf-dragging .colony-shelf-tray--sheet .colony-shelf-tray-item {
    pointer-events: none;
}
.colony-embed-mobile-fabs .colony-shelf-place-fab {
    order: -1;
}
@media (max-width: 800px) {
    .colony-shelf-place-fab-label {
        display: none;
    }
    .colony-shelf-place-fab {
        width: 52px;
        padding: 0;
    }
    .colony-shelf-toolbar-hint {
        display: none;
    }
}

.colony-shelf-tray-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    font-size: 13px;
    font-weight: 700;
    color:var(--text-muted);
    margin-bottom: 0.55rem;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.colony-shelf-tray-hint {
    margin-left: auto;
    font-weight: 500;
    color:var(--text-muted);
    font-size: 12px;
}

.colony-shelf-tray-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.colony-shelf-tray-empty {
    margin: 0;
    font-size: 13px;
    color:var(--text-muted);
}

.colony-shelf-tray-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 180px;
    border: 1px solid #e2e8f0;
    background: var(--card-bg);
    border-radius: 10px;
    padding: 0.3rem 0.55rem 0.3rem 0.3rem;
    cursor: grab;
    text-align: left;
}

.colony-shelf-tray-item:active {
    cursor: grabbing;
}

.colony-shelf-tray-thumb {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--border-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color:var(--text-muted);
    flex-shrink: 0;
}

.colony-shelf-tray-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.colony-shelf-tray-name {
    font-size: 12px;
    font-weight: 600;
    color:var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.colony-editor-box-dims-row .form-group {
    flex: 1;
}

@media (max-width: 640px) {
    .colony-shelf-cabinet {
        transform: none;
    }
    .colony-shelf-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Display studio extras */
.colony-shelf-style-switch{display:flex;flex-wrap:wrap;gap:0.35rem}
.colony-shelf-style-btn{border:1px solid #cbd5e1;background: var(--bg-surface);color:var(--text-muted);border-radius:999px;padding:0.35rem 0.8rem;font-size:13px;font-weight:600;cursor:pointer}
.colony-shelf-style-btn.is-active{background:#0f766e;border-color:#0f766e;color:#fff}
.colony-shelf-readonly-badge{font-size:12px;color:var(--text-muted);font-weight:600;padding:0.35rem 0.5rem}
.colony-shelf-hint--warn{color:#b45309!important;font-weight:600}
.colony-shelf-check{flex-direction:row!important;align-items:center;gap:0.4rem!important;margin-top:1.2rem}
.colony-shelf-theme-btn{width:28px;height:28px;border-radius:8px;border:2px solid transparent;background:var(--tbg,#334155);cursor:pointer}
.colony-shelf-theme-btn.is-active{border-color:#0f766e;outline:2px solid rgba(15,118,110,.25)}
.colony-shelf-studio {
  user-select: none;
  -webkit-user-select: none;
}
body.colony-shelf-dragging,
body.colony-shelf-dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grabbing !important;
}
.colony-shelf-box.is-selected {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
  z-index: 2;
}

/* ????????? */
body.colony-shelf-focus-open {
    overflow: hidden;
}
.colony-shelf-studio.is-shelf-focus {
    position: fixed;
    inset: 0;
    z-index: 12100;
    margin: 0;
    padding: 0.75rem 1rem 1.25rem;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(4px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.colony-shelf-studio.is-shelf-focus .colony-shelf-toolbar {
    flex-shrink: 0;
    max-width: 960px;
    width: 100%;
    margin: 0 auto 0.5rem;
    background: color-mix(in srgb, var(--card-bg) 96%, transparent);
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.colony-shelf-studio.is-shelf-focus .colony-shelf-stage-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 1.5rem 1rem 2rem;
    cursor: zoom-out;
    perspective: 1100px;
}
.colony-shelf-studio.is-shelf-focus .colony-shelf-cabinet {
    transform: rotateX(3deg) scale(1.42);
    transform-origin: center center;
    margin: 1.5rem auto;
    cursor: default;
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.35),
        inset 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.colony-shelf-studio.is-shelf-focus .colony-shelf-top {
    cursor: default;
}
.colony-shelf-studio.is-shelf-focus .colony-shelf-tray {
    max-width: 720px;
    width: 100%;
    margin: 0.5rem auto 0;
    background: color-mix(in srgb, var(--card-bg) 96%, transparent);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.colony-shelf-studio.is-shelf-focus .colony-shelf-size-pop {
    z-index: 12110;
}
@media (max-width: 640px) {
    .colony-shelf-studio.is-shelf-focus .colony-shelf-cabinet {
        transform: none;
    }
}

.colony-shelf-image{margin-top:0.85rem;padding:0.75rem;border:1px solid #fde68a;border-radius:12px;background:linear-gradient(180deg,#fffbeb,#fff)}
.colony-wall-wrap{overflow:auto;padding:0.5rem 0 1rem}
.colony-wall-stage{position:relative;min-height:360px;margin:0 auto 12px;border-radius:16px;border:1px solid #d6d3d1;overflow:visible;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.colony-wall-stage.is-drop-target{outline:3px dashed #0d9488}
.colony-stage-resize{position:absolute;z-index:8;background:rgba(14,165,233,.85);border:2px solid #fff;box-shadow:0 2px 8px rgba(15,23,42,.25);border-radius:4px}
.colony-stage-resize--e{top:50%;right:-6px;width:12px;height:48px;transform:translateY(-50%);cursor:ew-resize}
.colony-stage-resize--s{left:50%;bottom:-6px;width:48px;height:12px;transform:translateX(-50%);cursor:ns-resize}
.colony-stage-resize--se{
    right:-10px;
    bottom:-10px;
    width:28px;
    height:28px;
    cursor:nwse-resize;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0ea5e9,#0284c7);
    color:#fff;
    font-size:12px;
    touch-action:none;
    z-index:12;
}
.colony-stage-resize--se i{pointer:none;font-size:11px}
.colony-shelf-image-head{font-size:13px;font-weight:800;color:#92400e;margin-bottom:0.5rem;display:flex;align-items:center;gap:0.4rem}
.colony-shelf-image-preview{width:100%;height:88px;border-radius:10px;overflow:hidden;background: var(--border-soft);margin-bottom:0.55rem;display:flex;align-items:center;justify-content:center}
.colony-shelf-image-preview img{width:100%;height:100%;object-fit:cover;display:block}
.colony-shelf-image-ph{color:var(--text-muted);font-size:1.4rem}
.colony-shelf-image-row{display:flex;gap:0.4rem;align-items:center}
.colony-shelf-image-url{flex:1;min-width:0;border:1px solid #cbd5e1;border-radius:8px;padding:0.45rem 0.6rem;font-size:13px}
.colony-shelf-image-btn{width:36px;height:36px;border:1px solid #cbd5e1;border-radius:8px;background: var(--card-bg);cursor:pointer;color:var(--text-main);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.colony-shelf-image-btn:hover{background: var(--bg-surface)}
.colony-wall-tile{position:absolute;border:none;padding:0;border-radius:10px;overflow:visible;cursor:grab;background:#1e293b;box-shadow:0 8px 18px rgba(15,23,42,.22);user-select:none;-webkit-user-select:none}
.colony-wall-tile.is-selected{outline:2px solid #0ea5e9;outline-offset:2px;z-index:2}
.colony-wall-tile img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;border-radius:10px}
.colony-item-resize{position:absolute;right:-5px;bottom:-5px;width:14px;height:14px;border-radius:3px;background:rgba(14,165,233,.95);border:2px solid #fff;cursor:nwse-resize;z-index:3;box-shadow:0 1px 4px rgba(15,23,42,.3)}
.colony-item-rotate{position:absolute;left:-10px;top:-10px;width:26px;height:26px;border-radius:50%;background: var(--card-bg);border:2px solid #0ea5e9;color:#0369a1;cursor:grab;z-index:4;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 2px 6px rgba(15,23,42,.25)}
.colony-item-rotate:active{cursor:grabbing}
.colony-item-remove{
    position:absolute;
    right:-10px;
    top:-10px;
    width:26px;
    height:26px;
    border-radius:50%;
    border:2px solid #fff;
    background:#ef4444;
    color:#fff;
    cursor:pointer;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    line-height:1;
    padding:0;
    box-shadow:0 2px 6px rgba(15,23,42,.28);
}
.colony-item-remove:hover{background:#dc2626}
.colony-item-remove:focus-visible{outline:2px solid #fecaca;outline-offset:2px}
.colony-shelf-span2{grid-column:1 / -1}
.colony-shelf-size-section{margin:0.75rem 0 0.35rem;font-size:13px;color:#0f766e}
.colony-shelf-size-pop{position:sticky;bottom:12px;z-index:5;margin:0.75rem auto 0;max-width:420px;background: var(--card-bg);border:1px solid #e2e8f0;border-radius:14px;padding:0.85rem 1rem;box-shadow:0 12px 28px rgba(15,23,42,.18)}
.colony-shelf-size-pop-head{display:flex;justify-content:space-between;align-items:center;gap:0.5rem}
.colony-shelf-size-pop-head button{border:none;background:transparent;font-size:1.25rem;cursor:pointer;color:var(--text-muted)}
.colony-shelf-size-name{margin:0.35rem 0 0.65rem;font-size:13px;color:var(--text-muted);font-weight:600}
.colony-editor-box-dims-block{margin-bottom:0.75rem;padding:0.75rem;border:1px dashed #cbd5e1;border-radius:12px;background: var(--bg-surface)}
.colony-shelf-dl-wrap{position:relative;display:inline-flex}
.colony-shelf-dl-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:8;background: var(--card-bg);border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 10px 24px rgba(15,23,42,.16);min-width:140px;overflow:hidden}
.colony-shelf-dl-menu button{display:block;width:100%;text-align:left;border:none;background: var(--card-bg);padding:0.55rem 0.8rem;font-size:13px;cursor:pointer;color:var(--text-main)}
.colony-shelf-dl-menu button:hover{background: var(--bg-surface)}
.colony-wb-align-bar{display:flex;flex-wrap:wrap;gap:0.35rem;margin:0 0 0.65rem;padding:0.5rem 0.65rem;background: var(--bg-surface);border:1px solid #e2e8f0;border-radius:12px}
.colony-wb-wrap{
    overflow:hidden;
    padding:0.75rem 1.5rem 2rem 0.75rem;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:none;
    max-height:min(78vh, 900px);
    cursor:grab;
    position:relative;
}
.colony-wb-pan{
    display:block;
    width:max-content;
    min-width:100%;
    transform-origin:0 0;
    will-change:transform;
    margin:0 auto;
}
.colony-wb-wrap.is-panning,
.colony-wb-wrap.is-panning *{cursor:grabbing!important}
.colony-wb-wrap.is-pinching,
.colony-wb-wrap.is-pinching *{cursor:grabbing!important}
.colony-wb-wrap--pannable{scroll-behavior:auto}
.colony-wb-fs-exit{
    position:fixed;
    top:max(12px, env(safe-area-inset-top));
    right:max(12px, env(safe-area-inset-right));
    z-index:12250;
    border:none;
    border-radius:999px;
    padding:0.55rem 0.9rem;
    font-size:13px;
    font-weight:700;
    color:var(--text-main);
    background:rgba(255,255,255,.94);
    box-shadow:0 8px 24px rgba(15,23,42,.22);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
}
body.colony-wb-fullscreen-open{overflow:hidden}
.colony-shelf-studio.is-wb-fullscreen{
    position:fixed;
    inset:0;
    z-index:12120;
    margin:0;
    padding:0;
    background:#0f172a;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
}
.colony-shelf-studio.is-wb-fullscreen .colony-shelf-toolbar,
.colony-shelf-studio.is-wb-fullscreen .colony-wb-draw-bar,
.colony-shelf-studio.is-wb-fullscreen .colony-wb-align-bar{
    flex-shrink:0;
    margin:0.5rem 0.75rem 0;
    background:rgba(255,255,255,.96);
    border-radius:12px;
    padding:0.45rem 0.65rem;
}
.colony-shelf-studio.is-wb-fullscreen .colony-wb-wrap{
    flex:1 1 auto;
    max-height:none;
    height:100%;
    margin:0;
    padding:0.5rem;
    border-radius:0;
}
.colony-shelf-studio.is-wb-fullscreen .colony-shelf-size-pop,
.colony-shelf-studio.is-wb-fullscreen .colony-wb-text-pop{
    z-index:12240;
}
.colony-shelf-toolbar--slim{
    margin-bottom:0.45rem;
}
.colony-shelf-toolbar-hint{
    font-size:12px;
    color:var(--text-muted);
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
}
.colony-wb-stage{position:relative;margin:0 auto 12px;border-radius:16px;border:1px solid #d6d3d1;box-shadow:0 18px 40px rgba(15,23,42,.16);overflow:visible;background-size:cover;background-position:center;touch-action:none}
.colony-wb-stage.is-snap{background-image:linear-gradient(rgba(148,163,184,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.18) 1px,transparent 1px);background-size:20px 20px,20px 20px}
.colony-wb-stage.is-drop-target{outline:3px dashed #0d9488}
.colony-wb-block{position:absolute;cursor:grab;user-select:none;-webkit-user-select:none;transform-origin:center center;touch-action:none}
.colony-wb-block.is-dragging{opacity:.85;cursor:grabbing}
.colony-wb-block.is-selected{outline:2px solid #38bdf8;outline-offset:2px;z-index:2}
.colony-wb-game{border-radius:12px;overflow:visible;background:#0f172a;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.colony-wb-game img,.colony-wb-sticker img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;border-radius:12px}
.colony-wb-sticker{border-radius:12px;overflow:visible;background:transparent;box-shadow:0 8px 18px rgba(15,23,42,.18)}
.colony-wb-text{border-radius:12px;padding:0.65rem 0.8rem;border:1px solid rgba(148,163,184,.35);box-sizing:border-box}
.colony-wb-text-body{word-break:break-word;pointer-events:none;white-space:pre-wrap}
.colony-wb-text-pop{position:sticky;bottom:12px;z-index:5;margin:0.75rem auto 0;max-width:480px;background: var(--card-bg);border:1px solid #e2e8f0;border-radius:14px;padding:0.85rem 1rem;box-shadow:0 12px 28px rgba(15,23,42,.18)}
.colony-wb-text-pop textarea{border:1px solid #cbd5e1;border-radius:8px;padding:0.45rem 0.55rem;font-size:14px;resize:vertical;width:100%;box-sizing:border-box}
.colony-wb-collapse{margin-top:0.75rem;border:1px solid #fde68a;border-radius:12px;background:linear-gradient(180deg,#fffbeb,#fff);overflow:hidden}
.colony-wb-collapse-head{width:100%;display:flex;align-items:center;gap:0.45rem;border:none;background:transparent;padding:0.7rem 0.85rem;font-size:13px;font-weight:800;color:#92400e;cursor:pointer;text-align:left}
.colony-wb-collapse-chev{margin-left:auto;opacity:.7}
.colony-wb-collapse-body{display:none;padding:0 0.85rem 0.85rem}
.colony-wb-collapse.is-open .colony-wb-collapse-body{display:block}
body.colony-wb-exporting .colony-item-resize,
body.colony-wb-exporting .colony-item-rotate,
body.colony-wb-exporting .colony-item-remove,
body.colony-wb-exporting .colony-stage-resize,
body.colony-wb-exporting .colony-wb-block.is-selected{outline:none!important;box-shadow:none!important}
body.colony-wb-exporting .colony-item-resize,
body.colony-wb-exporting .colony-item-rotate,
body.colony-wb-exporting .colony-item-remove,
body.colony-wb-exporting .colony-stage-resize{visibility:hidden!important}


/* Shelf view must hide list/card grid */
body.colony-view-shelf #gamesGrid{display:none!important}
body.colony-view-shelf #colonyShelfStudio{display:block!important}
body:not(.colony-view-shelf) #colonyShelfStudio{display:none!important}
/* When NOT in shelf mode, never leave the inventory grid invisible (v1.00221 leak fix) */
body:not(.colony-view-shelf) #gamesGrid:not([hidden]){
    visibility:visible!important;
}
body:not(.colony-view-shelf) #gamesGrid.card-mode{display:grid!important}
body:not(.colony-view-shelf) #gamesGrid:not(.card-mode):not(.gv-host){display:flex!important}
#colony-view-shelf.active{color:var(--color-brand,#0f766e)!important}

.colony-shelf-tray-chev {
    margin-left: auto;
    opacity: 0.65;
    font-size: 12px;
    flex-shrink: 0;
}
.colony-shelf-tray-hint + .colony-shelf-tray-chev {
    margin-left: 0.35rem;
}
.colony-shelf-tray.is-collapsed .colony-shelf-tray-list {
    display: none;
}
.colony-shelf-tray.is-collapsed {
    min-height: 0;
    padding: 0.5rem 0.65rem;
}
.colony-shelf-tray.is-collapsed .colony-shelf-tray-title {
    margin-bottom: 0;
}

/* ===== Mobile shelf??????????? ===== */
@media (max-width: 800px) {
    /* ????????????????????????????? */
    body.colony-view-shelf .search-filter-row > .search-box-wrapper,
    body.colony-view-shelf .search-filter-row > .cabinet-filter-wrapper,
    body.colony-view-shelf .search-filter-row > .sort-wrapper,
    body.colony-view-shelf .search-filter-row > .filter-toggle-btn,
    body.colony-view-shelf #colony-more-views,
    body.colony-view-shelf #colonyThemeMenuRoot,
    body.colony-view-shelf #colony-card-density-container,
    body.colony-view-shelf #colony-announcement-banner {
        display: none !important;
    }

    body.colony-view-shelf .search-filter-row {
        margin-bottom: 0.25rem;
        gap: 0.25rem;
        justify-content: flex-end;
    }

    body.colony-view-shelf .search-filter-row > .colony-view-toolbar {
        width: auto;
        margin: 0;
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    body.colony-view-shelf #libraryView {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 auto;
    }

    body.colony-view-shelf #colonyShelfStudio.colony-shelf-studio {
        display: flex !important;
        flex-direction: column;
        margin: 0;
        padding: 0;
        flex: 1 1 auto;
        min-height: calc(100dvh - 11.5rem);
        box-sizing: border-box;
    }

    html.tm-embedded body.colony-view-shelf #colonyShelfStudio.colony-shelf-studio {
        min-height: calc(100dvh - var(--colony-mobile-tabbar-offset, 3.75rem) - 7.5rem);
        padding-bottom: 0.25rem;
    }

    /* ???????????? */
    body.colony-view-shelf .colony-shelf-style-switch {
        display: none;
    }

    body.colony-view-shelf .colony-shelf-toolbar {
        flex-shrink: 0;
        flex-direction: row;
        align-items: center;
        margin-bottom: 0.35rem;
        gap: 0.3rem;
        position: sticky;
        top: 0;
        z-index: 6;
        background: var(--color-bg-page, #f8fafc);
        padding: 0.2rem 0;
    }

    body.colony-view-shelf .colony-shelf-toolbar-actions {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.3rem;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    body.colony-view-shelf .colony-shelf-toolbar-actions::-webkit-scrollbar {
        display: none;
    }

    body.colony-view-shelf .colony-shelf-toolbar-actions .btn,
    body.colony-view-shelf .colony-wb-draw-bar .btn,
    body.colony-view-shelf .colony-wb-align-bar .btn {
        flex: 0 0 auto;
        min-height: 40px;
        min-width: 40px;
        padding: 0.45rem 0.55rem;
        touch-action: manipulation;
    }

    body.colony-view-shelf .colony-shelf-btn-label {
        display: none;
    }

    body.colony-view-shelf .colony-shelf-panel {
        flex-shrink: 0;
        margin-bottom: 0.45rem;
        padding: 0.65rem 0.7rem;
        max-height: min(42vh, 320px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }

    body.colony-view-shelf .colony-wb-draw-bar,
    body.colony-view-shelf .colony-wb-align-bar {
        flex-shrink: 0;
        margin-bottom: 0.4rem;
        padding: 0.4rem 0.5rem;
        gap: 0.3rem;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    body.colony-view-shelf .colony-wb-wrap,
    body.colony-view-shelf .colony-shelf-stage-wrap,
    body.colony-view-shelf .colony-wall-wrap {
        flex: 1 1 auto;
        min-height: min(68dvh, 640px);
        max-height: none;
        padding: 0.35rem 1.25rem 1.75rem 0.35rem;
        margin: 0;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: none;
    }

    body.colony-view-shelf .colony-wb-stage,
    body.colony-view-shelf .colony-wall-stage {
        margin-bottom: 0.35rem;
        border-radius: 12px;
    }

    body.colony-view-shelf .colony-shelf-tray--sheet {
        max-height: min(52vh, 460px);
        bottom: 0;
        padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px) + var(--colony-mobile-tabbar-offset, 0px));
    }

    html.tm-embedded body.colony-view-shelf .colony-shelf-tray--sheet {
        padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px) + var(--colony-mobile-tabbar-offset, 3.75rem));
    }

    body.colony-view-shelf .colony-shelf-tray-hint {
        display: block;
    }

    body.colony-view-shelf .colony-shelf-tray-item {
        min-height: 40px;
        padding: 0.35rem 0.5rem;
    }

    body.colony-view-shelf .colony-shelf-size-pop,
    body.colony-view-shelf .colony-wb-text-pop {
        bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
        max-width: calc(100% - 0.5rem);
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }

    /* ????? FAB ???????????? FAB ???? */
    body.colony-view-shelf #colony-embed-mobile-fabs {
        transform: scale(0.95);
        transform-origin: bottom right;
        opacity: 0.95;
        gap: 0.45rem;
    }
}

/* ========== Dark pass v3???????????????????????? ========== */
@media (prefers-color-scheme: dark) {
    html:not([data-tm-scheme="light"]),
    html:not([data-tm-scheme="light"]) body {
        background-color: var(--bg-main) !important;
        color: var(--text-main);
    }
    html:not([data-tm-scheme="light"]) .modal-content,
    html:not([data-tm-scheme="light"]) .game-card,
    html:not([data-tm-scheme="light"]) .lobby-library-card,
    html:not([data-tm-scheme="light"]) .filters-panel,
    html:not([data-tm-scheme="light"]) .sidebar,
    html:not([data-tm-scheme="light"]) .colony-sticky-bar,
    html:not([data-tm-scheme="light"]) .colony-embed-lib-bar,
    html:not([data-tm-scheme="light"]) .colony-remote-fab-menu,
    html:not([data-tm-scheme="light"]) .colony-mobile-fab,
    html:not([data-tm-scheme="light"]) .remote-btn,
    html:not([data-tm-scheme="light"]) .lib-switcher-card,
    html:not([data-tm-scheme="light"]) .lib-action-btn,
    html:not([data-tm-scheme="light"]) .sort-menu-panel,
    html:not([data-tm-scheme="light"]) .sort-menu-trigger,
    html:not([data-tm-scheme="light"]) .colony-shelf-panel,
    html:not([data-tm-scheme="light"]) .colony-shelf-size-pop,
    html:not([data-tm-scheme="light"]) .colony-wb-text-pop,
    html:not([data-tm-scheme="light"]) .colony-shelf-dl-menu,
    html:not([data-tm-scheme="light"]) .colony-shelf-dl-menu button,
    html:not([data-tm-scheme="light"]) .colony-shelf-toolbar,
    html:not([data-tm-scheme="light"]) .gv-view-menu > summary,
    html:not([data-tm-scheme="light"]) .gv-view-menu-popover,
    html:not([data-tm-scheme="light"]) .gv-shelf-section,
    html:not([data-tm-scheme="light"]) .view-mode-switch,
    html:not([data-tm-scheme="light"]) .view-mode-btn.active {
        background: var(--card-bg) !important;
        color: var(--text-main) !important;
        border-color: var(--border-soft) !important;
        box-shadow: var(--shadow-flat);
    }
    html:not([data-tm-scheme="light"]) .main-content,
    html:not([data-tm-scheme="light"]) #libraryView,
    html:not([data-tm-scheme="light"]) #lobbyView,
    html:not([data-tm-scheme="light"]) .games-grid,
    html:not([data-tm-scheme="light"]) .gv-host,
    html:not([data-tm-scheme="light"]) .colony-mobile-tabbar,
    html:not([data-tm-scheme="light"]) .colony-bottom-nav {
        background: var(--bg-main) !important;
        color: var(--text-main);
        border-color: var(--border-soft) !important;
    }
    html:not([data-tm-scheme="light"]) input,
    html:not([data-tm-scheme="light"]) textarea,
    html:not([data-tm-scheme="light"]) select {
        background: var(--bg-surface) !important;
        color: var(--text-main) !important;
        border-color: var(--border-soft) !important;
    }
    html:not([data-tm-scheme="light"]) .remote-btn:hover,
    html:not([data-tm-scheme="light"]) .lib-action-btn:hover,
    html:not([data-tm-scheme="light"]) .sort-menu-trigger:hover {
        box-shadow: var(--shadow-flat-lg) !important;
        border-color: var(--border-dark) !important;
    }
}
html[data-tm-scheme="dark"],
html[data-tm-scheme="dark"] body {
    background-color: var(--bg-main) !important;
    color: var(--text-main);
}
html[data-tm-scheme="dark"] .modal-content,
html[data-tm-scheme="dark"] .game-card,
html[data-tm-scheme="dark"] .lobby-library-card,
html[data-tm-scheme="dark"] .filters-panel,
html[data-tm-scheme="dark"] .sidebar,
html[data-tm-scheme="dark"] .colony-sticky-bar,
html[data-tm-scheme="dark"] .colony-embed-lib-bar,
html[data-tm-scheme="dark"] .colony-remote-fab-menu,
html[data-tm-scheme="dark"] .colony-mobile-fab,
html[data-tm-scheme="dark"] .remote-btn,
html[data-tm-scheme="dark"] .lib-switcher-card,
html[data-tm-scheme="dark"] .lib-action-btn,
html[data-tm-scheme="dark"] .sort-menu-panel,
html[data-tm-scheme="dark"] .sort-menu-trigger,
html[data-tm-scheme="dark"] .colony-shelf-panel,
html[data-tm-scheme="dark"] .colony-shelf-size-pop,
html[data-tm-scheme="dark"] .colony-wb-text-pop,
html[data-tm-scheme="dark"] .colony-shelf-dl-menu,
html[data-tm-scheme="dark"] .colony-shelf-dl-menu button,
html[data-tm-scheme="dark"] .colony-shelf-toolbar,
html[data-tm-scheme="dark"] .gv-view-menu > summary,
html[data-tm-scheme="dark"] .gv-view-menu-popover,
html[data-tm-scheme="dark"] .gv-shelf-section,
html[data-tm-scheme="dark"] .view-mode-switch,
html[data-tm-scheme="dark"] .view-mode-btn.active {
    background: var(--card-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-soft) !important;
    box-shadow: var(--shadow-flat);
}
html[data-tm-scheme="dark"] .main-content,
html[data-tm-scheme="dark"] #libraryView,
html[data-tm-scheme="dark"] #lobbyView,
html[data-tm-scheme="dark"] .games-grid,
html[data-tm-scheme="dark"] .gv-host,
html[data-tm-scheme="dark"] .colony-mobile-tabbar,
html[data-tm-scheme="dark"] .colony-bottom-nav {
    background: var(--bg-main) !important;
    color: var(--text-main);
    border-color: var(--border-soft) !important;
}
html[data-tm-scheme="dark"] input,
html[data-tm-scheme="dark"] textarea,
html[data-tm-scheme="dark"] select {
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
    border-color: var(--border-soft) !important;
}
html[data-tm-scheme="dark"] .remote-btn:hover,
html[data-tm-scheme="dark"] .lib-action-btn:hover,
html[data-tm-scheme="dark"] .sort-menu-trigger:hover {
    box-shadow: var(--shadow-flat-lg) !important;
    border-color: var(--border-dark) !important;
}

/* ?????? merchant / embedded ? display:flex !important */
@media (max-width: 800px) {
    html.tm-keyboard-open body .sub-pill-bar,
    html.tm-keyboard-open body.colony-merchant-embed-active .sub-pill-bar,
    html.tm-embedded.tm-keyboard-open body .sub-pill-bar,
    html.tm-embedded.tm-keyboard-open body.colony-merchant-embed-active .sub-pill-bar,
    body.tm-keyboard-open.colony-merchant-embed-active .sub-pill-bar,
    html.tm-keyboard-open body .colony-mpub-actions,
    html.tm-keyboard-open body.colony-merchant-embed-active .colony-mpub-actions,
    html.tm-embedded.tm-keyboard-open body .colony-mpub-actions,
    html.tm-embedded.tm-keyboard-open body.colony-merchant-embed-active .colony-mpub-actions,
    body.tm-keyboard-open.colony-merchant-embed-active .colony-mpub-actions,
    html.tm-keyboard-open body .colony-dialog--claim-form .colony-dialog-actions,
    html.tm-keyboard-open body.colony-merchant-embed-active .colony-dialog--claim-form .colony-dialog-actions,
    html.tm-embedded.tm-keyboard-open body .colony-dialog--claim-form .colony-dialog-actions,
    html.tm-embedded.tm-keyboard-open body.colony-merchant-embed-active .colony-dialog--claim-form .colony-dialog-actions,
    body.tm-keyboard-open.colony-merchant-embed-active .colony-dialog--claim-form .colony-dialog-actions,
    html.tm-keyboard-open body #colonyDrawClaimFormOverlay .colony-dialog-actions,
    html.tm-embedded.tm-keyboard-open body #colonyDrawClaimFormOverlay .colony-dialog-actions,
    body.tm-keyboard-open #colonyDrawClaimFormOverlay .colony-dialog-actions {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 0 !important;
        max-height: 0 !important;
        opacity: 0 !important;
        transform: translateY(110%) !important;
    }
}

/* ========== Village Hub (??????) ========== */
.colony-village-hub {
    margin: 0.65rem 0.85rem 1rem;
    animation: colonyVillageHubIn 0.45s ease both;
}
@keyframes colonyVillageHubIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.colony-village-hub-inner {
    --village-accent: #059669;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: 0 1px 0 rgba(44, 34, 30, 0.04), var(--shadow-flat);
}
.colony-village-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr);
    min-height: 220px;
}
.colony-village-cover {
    position: relative;
    min-height: 220px;
    background:
        radial-gradient(ellipse 80% 70% at 20% 10%, color-mix(in srgb, var(--village-accent) 35%, transparent), transparent 60%),
        linear-gradient(145deg, color-mix(in srgb, var(--village-accent) 22%, var(--bg-surface)) 0%, var(--bg-main) 100%);
    background-size: cover;
    background-position: center;
}
.colony-village-cover.is-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
}
.colony-village-cover-fallback {
    width: 72px;
    opacity: 0.85;
    z-index: 1;
}
.colony-village-cover-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 35%, color-mix(in srgb, var(--card-bg) 88%, transparent) 100%);
    pointer-events: none;
}
.colony-village-hero-copy {
    position: relative;
    z-index: 1;
    padding: 1.15rem 1.25rem 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    background:
        radial-gradient(ellipse 90% 80% at 100% 0%, color-mix(in srgb, var(--village-accent) 12%, transparent), transparent 55%),
        var(--card-bg);
}
.colony-village-kicker {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--village-accent);
}
.colony-village-kicker i { opacity: 0.9; }
.colony-village-public-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--village-accent) 35%, var(--border-soft));
    background: color-mix(in srgb, var(--village-accent) 10%, var(--card-bg));
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
.colony-village-name {
    margin: 0;
    font-size: clamp(1.55rem, 3.6vw, 2.15rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-main);
}
.colony-village-motto {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 36em;
}
.colony-village-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    margin-top: 0.15rem;
}
.colony-village-stat {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.colony-village-stat strong {
    color: var(--text-main);
    font-weight: 900;
    margin-right: 0.15rem;
}
.colony-village-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.35rem;
}
.colony-village-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    border: 2px solid var(--text-main);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-main);
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
    box-shadow: 2px 2px 0 rgba(44, 34, 30, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.colony-village-cta:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 rgba(44, 34, 30, 0.22);
}
.colony-village-cta:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 rgba(44, 34, 30, 0.18);
}
.colony-village-cta--primary {
    background: var(--village-accent);
    color: #fff;
    border-color: var(--village-accent);
    box-shadow: 2px 2px 0 rgba(4, 120, 87, 0.25);
}
.colony-village-cta--soft {
    background: color-mix(in srgb, var(--village-accent) 12%, var(--card-bg));
}
.colony-village-edit-identity {
    align-self: flex-start;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.2rem 0;
}
.colony-village-edit-identity:hover { color: var(--village-accent); }
.colony-village-panels {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    border-top: 2px solid var(--border-soft);
}
.colony-village-panel {
    padding: 0.85rem 1rem 1rem;
}
.colony-village-panel--pulse {
    border-right: 1px solid var(--border-soft);
}
.colony-village-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}
.colony-village-panel-head h2 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: var(--text-main);
}
.colony-village-panel-link {
    border: none;
    background: transparent;
    color: var(--village-accent);
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    padding: 0;
}
.colony-village-pulse-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.colony-village-pulse-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: start;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-secondary);
}
.colony-village-pulse-dot {
    width: 8px;
    height: 8px;
    margin-top: 0.35rem;
    border-radius: 50%;
    background: var(--village-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--village-accent) 22%, transparent);
}
.colony-village-pulse-item--announce .colony-village-pulse-dot { background: #b45309; }
.colony-village-pulse-item--member .colony-village-pulse-dot { background: #2e7d32; }
.colony-village-pulse-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.colony-village-members-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.colony-village-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 140px;
    padding: 0.25rem 0.55rem 0.25rem 0.25rem;
    border: 1.5px solid var(--border-soft);
    border-radius: 999px;
    background: var(--bg-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.colony-village-member-chip:hover {
    border-color: var(--village-accent);
    transform: translateY(-1px);
}
.colony-village-member-chip img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-soft);
}
.colony-village-member-chip-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.colony-village-members-empty {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.colony-village-empty-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}
.colony-village-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border: 2px dashed color-mix(in srgb, var(--village-accent) 55%, var(--border-soft));
    border-radius: 12px;
    background: color-mix(in srgb, var(--village-accent) 8%, var(--card-bg));
    color: var(--text-main);
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
}
.colony-village-empty-cta--secondary {
    background: var(--card-bg);
}
.colony-village-back-hub {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem;
    border: none;
    border-top: 2px solid var(--border-soft);
    background: color-mix(in srgb, var(--village-accent) 8%, var(--bg-surface));
    color: var(--village-accent);
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
}
body.colony-village-browse .colony-village-back-hub:not([hidden]) {
    display: inline-flex;
}

/* Hub-first: exclusive views — hub OR library (never stacked) */
body.colony-has-village-hub:not(.colony-village-browse):not(.colony-lobby-mode) #librarySearchFilterRow,
body.colony-has-village-hub:not(.colony-village-browse):not(.colony-lobby-mode) .toolbar-row,
body.colony-has-village-hub:not(.colony-village-browse):not(.colony-lobby-mode) .count-banner,
body.colony-has-village-hub:not(.colony-village-browse):not(.colony-lobby-mode) #gamesGrid,
body.colony-has-village-hub:not(.colony-village-browse):not(.colony-lobby-mode) #colonyShelfStudio,
body.colony-has-village-hub:not(.colony-village-browse):not(.colony-lobby-mode) #libraryView {
    display: none !important;
}
body.colony-has-village-hub:not(.colony-village-browse):not(.colony-lobby-mode) #colony-announcement-banner {
    margin-left: 0.85rem;
    margin-right: 0.85rem;
}
/* Browse library: leave intro entirely (do not keep hub above inventory) */
body.colony-village-browse #colonyVillageHub {
    display: none !important;
}

.colony-invite-modal-content .colony-invite-qr-wrap {
    display: flex;
    justify-content: center;
    margin: 0.75rem 0 1rem;
}
.colony-invite-qr {
    width: 180px;
    height: 180px;
    border: 2px solid var(--text-main);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-flat);
}
.colony-invite-url-row {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}
.colony-invite-url-row input { flex: 1; min-width: 0; }

.lib-settings-accent-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}
.lib-settings-accent-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border: 2px solid var(--border-soft);
    border-radius: 999px;
    background: var(--card-bg);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
}
.lib-settings-accent-chip.is-active {
    border-color: var(--text-main);
    box-shadow: 2px 2px 0 var(--text-main);
}
.lib-settings-accent-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.2);
}

/* Lobby atmosphere polish (no decorative ::after blob ? clipped short hero looked like a stray pink chip) */
.lobby-hero {
    background:
        radial-gradient(ellipse 70% 90% at 0% 0%, rgba(31, 90, 133, 0.16), transparent 55%),
        linear-gradient(135deg, #ecfdf5 0%, #f0f9ff 55%, #fff 100%);
}
.lobby-grid.card-mode .lobby-library-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lobby-grid.card-mode .lobby-library-card:hover {
    transform: translateY(-3px);
}

@media (max-width: 800px) {
    .colony-village-hub { margin: 0.5rem 0.55rem 0.85rem; }
    .colony-village-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .colony-village-cover {
        min-height: 140px;
    }
    .colony-village-cover-shade {
        background: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--card-bg) 92%, transparent) 100%);
    }
    .colony-village-hero-copy {
        margin-top: -2.5rem;
        border-radius: 16px 16px 0 0;
        padding-top: 1rem;
    }
    .colony-village-panels { grid-template-columns: 1fr; }
    .colony-village-panel--pulse { border-right: none; border-bottom: 1px solid var(--border-soft); }
    .colony-village-cta { flex: 1 1 calc(50% - 0.45rem); justify-content: center; }
    .colony-invite-url-row { flex-direction: column; align-items: stretch; }
}

html[data-tm-scheme="dark"] .colony-village-cta--primary,
html:not([data-tm-scheme="light"]) .colony-village-cta--primary {
    color: #0f172a;
}

/* ??? Colony UX polish (members / library enter / social chips / notifs) ??? */
.lib-members-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.15rem 0.15rem 0.45rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-main);
}
.lib-members-list-head-hint {
    font-weight: 600;
    font-size: 0.68rem;
    color: var(--text-muted);
}
.lib-members-empty-invite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    margin-bottom: 0.65rem;
    border-radius: 12px;
    border: 1.5px dashed color-mix(in srgb, #1f5a85 45%, var(--border-soft));
    background:
        radial-gradient(ellipse 80% 120% at 0% 0%, color-mix(in srgb, #1f5a85 14%, transparent), transparent 55%),
        color-mix(in srgb, #1f5a85 6%, var(--card-bg));
}
.lib-members-empty-invite-copy strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-main);
}
.lib-members-empty-invite-copy p {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.lib-member-item {
    border-radius: 12px;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--card-bg) 92%, var(--bg-surface));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lib-member-item.is-self {
    border-color: color-mix(in srgb, #1f5a85 40%, var(--border-soft));
    box-shadow: 0 0 0 1px color-mix(in srgb, #1f5a85 12%, transparent);
}
.lib-member-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.lib-member-role-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--card-bg);
    background: #94a3b8;
}
.lib-member-role-dot--owner { background: #b45309; }
.lib-member-role-dot--admin { background: #1d4ed8; }
.lib-member-role-dot--member { background: #0f766e; }
.lib-member-role-dot--visitor { background: #94a3b8; }
.lib-member-meta {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 0.12rem;
}
.lib-member-uid { display: none; }

.meta-pill-purchaser,
.meta-pill-added {
    background: color-mix(in srgb, #0f766e 12%, var(--bg-surface));
    color: #0f766e;
    border-color: color-mix(in srgb, #0f766e 28%, transparent);
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.meta-pill-added {
    background: color-mix(in srgb, #1f5a85 12%, var(--bg-surface));
    color: #1f5a85;
    border-color: color-mix(in srgb, #1f5a85 28%, transparent);
}

.colony-village-sticky-back {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(120%);
    z-index: 11850;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    border: 1.5px solid color-mix(in srgb, #1f5a85 45%, var(--border-soft));
    border-radius: 999px;
    background: color-mix(in srgb, var(--card-bg) 92%, #1f5a85);
    color: #1f5a85;
    font-weight: 800;
    font-size: 0.82rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease;
}
.colony-village-sticky-back .icon-svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.colony-village-sticky-back-visible .colony-village-sticky-back:not([hidden]) {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
body.colony-village-sticky-back-visible .colony-village-back-hub {
    display: none !important;
}
html.tm-embedded body.colony-village-sticky-back-visible .colony-village-sticky-back {
    bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
}

.colony-library-enter-overlay {
    position: fixed;
    inset: 0;
    z-index: 13050;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse 70% 50% at 50% 40%, color-mix(in srgb, #1f5a85 28%, transparent), rgba(15, 23, 42, 0.35));
    transition: opacity 0.2s ease;
}
.colony-library-enter-overlay.is-playing {
    opacity: 1;
    animation: colonyLibraryEnterFade 0.9s ease forwards;
}
.colony-library-enter-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.1rem 1.4rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--card-bg) 94%, #1f5a85);
    border: 1.5px solid color-mix(in srgb, #1f5a85 35%, var(--border-soft));
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.22);
    transform: translateY(10px) scale(0.96);
}
.colony-library-enter-overlay.is-playing .colony-library-enter-card {
    animation: colonyLibraryEnterCard 0.9s ease forwards;
}
.colony-library-enter-icon .icon-svg {
    width: 28px;
    height: 28px;
    stroke: #1f5a85;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.colony-library-enter-title {
    font-weight: 900;
    font-size: 1rem;
    color: var(--text-main);
}
.colony-library-enter-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}
@keyframes colonyLibraryEnterFade {
    0% { opacity: 0; }
    18% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes colonyLibraryEnterCard {
    0% { transform: translateY(14px) scale(0.94); opacity: 0; }
    25% { transform: translateY(0) scale(1); opacity: 1; }
    75% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-8px) scale(1.02); opacity: 0; }
}
body.colony-village-browse #libraryView,
body.colony-village-browse #gamesGrid {
    animation: colonyLibraryReveal 0.45s ease both;
}
@keyframes colonyLibraryReveal {
    from { opacity: 0.35; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.colony-welcome-modal {
    overflow: hidden;
}
.colony-welcome-hero {
    height: 72px;
    margin: -1.25rem -1.25rem 0.85rem;
    border-radius: 12px 12px 0 0;
    background:
        radial-gradient(ellipse 70% 90% at 15% 20%, rgba(255, 255, 255, 0.28), transparent 55%),
        linear-gradient(135deg, #1f5a85 0%, #0f766e 55%, #6b4423 100%);
}
.colony-welcome-hero--join {
    background:
        radial-gradient(ellipse 70% 90% at 80% 10%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(135deg, #6b4423 0%, #b45309 50%, #1f5a85 100%);
}
.colony-welcome-kicker {
    margin: 0 0 0.25rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1f5a85;
}

.join-visitor-welcome {
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.85rem;
    border-radius: 12px;
    background:
        radial-gradient(ellipse 80% 100% at 0% 0%, color-mix(in srgb, #1f5a85 16%, transparent), transparent 60%),
        var(--bg-surface);
    border: 1px solid var(--border-soft);
}
.join-visitor-welcome-kicker {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1f5a85;
}
.join-visitor-welcome strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.95rem;
}
.join-visitor-welcome p {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.join-review-empty {
    text-align: center;
    padding: 1.25rem 0.75rem;
    border-radius: 12px;
    background: var(--bg-surface);
    border: 1px dashed var(--border-soft);
}
.join-review-empty strong {
    display: block;
    font-size: 0.9rem;
}
.join-review-empty p {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.join-request-card {
    border-radius: 12px;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--text-main) 4%, transparent);
}
.join-request-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    vertical-align: middle;
    background: #fef3c7;
    color: #b45309;
}

.colony-announcement-banner-btn {
    border-width: 1.5px;
    box-shadow: 0 2px 10px rgba(180, 83, 9, 0.08);
}
.colony-announcement-banner-icon .icon-svg,
.colony-announcement-banner-chevron .icon-svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.colony-announcement-item {
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    padding: 0.75rem 0.85rem;
    background: var(--card-bg);
}
.colony-announcement-item.is-latest {
    border-color: color-mix(in srgb, #b45309 40%, var(--border-soft));
    background: linear-gradient(135deg, color-mix(in srgb, #fffbeb 80%, var(--card-bg)), var(--card-bg));
}
.colony-announcement-item-badge {
    display: inline-block;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    background: #fef3c7;
    color: #b45309;
    margin-right: 0.35rem;
}
.colony-announcements-empty--rich {
    text-align: center;
    padding: 1.1rem 0.75rem;
    border-radius: 12px;
    background: var(--bg-surface);
    border: 1px dashed var(--border-soft);
}
.colony-announcements-empty--rich strong {
    display: block;
    font-size: 0.9rem;
}
.colony-announcements-empty--rich p {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.colony-notif-empty {
    text-align: center;
    padding: 1.25rem 0.85rem !important;
}
.colony-notif-empty-title {
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--text-main);
}
.colony-notif-empty-hint {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.colony-notif-item {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    border-radius: 10px;
    padding: 0.65rem 0.7rem !important;
}
.colony-notif-item-kind {
    width: 8px;
    height: 8px;
    margin-top: 0.35rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: #94a3b8;
}
.colony-notif-item--announce .colony-notif-item-kind { background: #b45309; }
.colony-notif-item--join .colony-notif-item-kind { background: #1d4ed8; }
.colony-notif-item--game .colony-notif-item-kind { background: #0f766e; }
.colony-notif-item--chat .colony-notif-item-kind { background: #7c3aed; }
.colony-notif-item-body { min-width: 0; flex: 1; }

/* ===== Village hub WAVE 2 ===== */
.lobby-library-card {
    --lobby-accent: #059669;
}
.lobby-library-motto {
    margin: -0.15rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lobby-library-motto--soft {
    color: var(--text-muted);
    font-style: italic;
}
.lobby-library-card .lobby-library-cover {
    box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--lobby-accent) 70%, transparent);
}

.colony-village-chat-hint {
    margin: 0.15rem 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.colony-village-cta--chat {
    background: color-mix(in srgb, var(--village-accent) 18%, var(--card-bg));
}
.colony-village-stat--live strong {
    color: #15803d;
}
.colony-village-member-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.colony-village-presence-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--card-bg);
}
.colony-village-member-chip-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    align-items: flex-start;
}
.colony-village-presence-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
}
.colony-village-member-chip.is-active .colony-village-presence-label {
    color: #15803d;
}
.colony-village-member-chip.is-recent .colony-village-presence-label {
    color: #a16207;
}
.colony-village-panel--lfg {
    border-top: 1px solid var(--border-soft);
    padding: 0.85rem 1rem 1rem;
}
.colony-village-lfg-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.colony-village-lfg-item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.65rem;
    border: 1.5px solid var(--border-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--village-accent) 6%, var(--card-bg));
}
.colony-village-lfg-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}
.colony-village-lfg-copy strong {
    font-size: 0.78rem;
    color: var(--text-main);
}
.colony-village-lfg-copy span {
    font-size: 0.84rem;
    color: var(--text-secondary);
}
.colony-village-lfg-copy time {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.colony-village-lfg-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}
.colony-village-lfg-btn {
    border: 1.5px solid var(--text-main);
    border-radius: 10px;
    background: var(--card-bg);
    padding: 0.35rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}
.colony-village-lfg-btn--primary {
    background: var(--village-accent);
    color: #fff;
    border-color: color-mix(in srgb, var(--village-accent) 55%, #000);
}
.colony-village-lfg-empty {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}
.colony-village-lfg-empty p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.colony-village-empty-banner {
    margin: 0 1rem 1rem;
    padding: 0.85rem 1rem;
    border: 2px dashed color-mix(in srgb, var(--village-accent) 45%, var(--border-soft));
    border-radius: 14px;
    background: color-mix(in srgb, var(--village-accent) 7%, var(--card-bg));
}
.colony-village-empty-banner h3 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 900;
}
.colony-village-empty-banner > p {
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.colony-village-empty-banner .colony-village-empty-row {
    padding: 0;
}
.colony-village-pulse-item--play .colony-village-pulse-dot,
.colony-village-pulse-item--identity .colony-village-pulse-dot {
    background: #7c3aed;
}

.colony-village-sticky {
    position: fixed;
    left: 50%;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1180;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
    padding: 0.35rem;
    max-width: calc(100vw - 1.2rem);
    overflow-x: auto;
    border: 2px solid var(--text-main);
    border-radius: 999px;
    background: color-mix(in srgb, var(--card-bg) 92%, transparent);
    box-shadow: 3px 3px 0 var(--text-main);
    backdrop-filter: blur(8px);
}
.colony-village-sticky[hidden] { display: none !important; }
.colony-village-sticky-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 3.1rem;
    padding: 0.35rem 0.45rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-main);
    font-size: 0.62rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.colony-village-sticky-btn i {
    font-size: 0.95rem;
}
.colony-village-sticky-btn--accent {
    background: color-mix(in srgb, var(--village-accent, #1F5A85) 18%, transparent);
    color: var(--village-accent, #1F5A85);
}
body.colony-has-village-sticky {
    --colony-fab-base-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
    --colony-tools-fab-bottom: var(--colony-fab-base-bottom);
    --colony-ai-fab-bottom: calc(
        var(--colony-fab-base-bottom) + var(--colony-tools-fab-size) + var(--colony-fab-gap)
    );
}
body.colony-has-village-sticky .colony-remote-container {
    bottom: var(--colony-fab-base-bottom, var(--colony-tools-fab-bottom));
}
body.colony-has-village-sticky .colony-embed-mobile-fabs {
    bottom: var(--colony-fab-base-bottom, var(--colony-tools-fab-bottom));
}
@media (max-width: 800px) {
    /* 手機分頁列已抬高工具 FAB；村聚 sticky 再取較高者，避免 AI／工具仍貼底重疊 */
    html:not(.tm-embedded) body.colony-has-village-sticky {
        --colony-fab-base-bottom: max(
            calc(4.6rem + env(safe-area-inset-bottom, 0px)),
            calc(var(--colony-mobile-tabbar-offset, 3.75rem) + 40px)
        );
        --colony-tools-fab-bottom: var(--colony-fab-base-bottom);
        --colony-ai-fab-bottom: calc(
            var(--colony-fab-base-bottom) + var(--colony-tools-fab-size) + var(--colony-fab-gap)
        );
    }
    html.tm-embedded body.colony-has-village-sticky {
        --colony-fab-base-bottom: max(
            calc(4.6rem + env(safe-area-inset-bottom, 0px)),
            calc(120px + env(safe-area-inset-bottom, 0px))
        );
        --colony-tools-fab-bottom: var(--colony-fab-base-bottom);
        --colony-ai-fab-bottom: calc(
            var(--colony-fab-base-bottom) + var(--colony-tools-fab-size) + var(--colony-fab-gap)
        );
    }
}
body.colony-has-village-sticky .colony-village-sticky-back {
    display: none !important;
}
body.colony-has-village-sticky .main-content,
body.colony-has-village-sticky #libraryView,
body.colony-has-village-sticky #gamesGrid {
    padding-bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px));
}
.colony-village-sticky {
    z-index: 11840;
}

.lib-members-role-legend {
    margin: 0.35rem 0 0.7rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: color-mix(in srgb, var(--card-bg) 88%, #1f5a85);
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.lib-members-role-legend strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-main);
    font-size: 0.78rem;
}
.lib-members-role-legend ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.lib-members-role-legend li {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.2rem 0;
    line-height: 1.35;
}
.lib-members-role-legend .lib-member-role-dot {
    margin-top: 0.28rem;
    flex: 0 0 auto;
}

.lobby-library-live-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.15rem 0 0.35rem;
}
.lobby-library-live {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    border: 1px solid transparent;
}
.lobby-library-live--lfg {
    color: #b45309;
    background: color-mix(in srgb, #b45309 12%, var(--bg-surface));
    border-color: color-mix(in srgb, #b45309 28%, transparent);
}
.lobby-library-live--active {
    color: #15803d;
    background: color-mix(in srgb, #15803d 12%, var(--bg-surface));
    border-color: color-mix(in srgb, #15803d 28%, transparent);
}
.lobby-library-live--active i {
    font-size: 0.45rem;
}

.btn-card-want.is-wanted,
.btn-card-want.is-wanted i {
    color: #db2777;
}
.btn-card-want.is-wanted {
    background: color-mix(in srgb, #db2777 14%, var(--card-bg));
}
.btn-card-want:disabled {
    opacity: 0.55;
    cursor: wait;
}

@media (max-width: 720px) {
    .colony-village-panels {
        grid-template-columns: 1fr;
    }
    .colony-village-panel--pulse {
        border-right: none;
        border-bottom: 1px solid var(--border-soft);
    }
    .colony-village-hero {
        grid-template-columns: 1fr;
    }
}

.lib-member-presence {
    display: inline-block;
    margin-top: 0.1rem;
    font-size: 0.68rem;
    font-weight: 800;
}
.lib-member-presence--active { color: #15803d; }
.lib-member-presence--recent { color: #a16207; }

.colony-village-milestone {
    margin-top: 0.35rem;
    padding: 0.45rem 0.55rem;
    border: 1.5px solid color-mix(in srgb, var(--village-accent) 35%, var(--border-soft));
    border-radius: 12px;
    background: color-mix(in srgb, var(--village-accent) 8%, var(--card-bg));
}
.colony-village-milestone-top {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
}
.colony-village-milestone-level {
    font-weight: 900;
    color: var(--village-accent);
}
.colony-village-milestone-score {
    margin-left: auto;
    color: var(--text-muted);
    font-weight: 700;
}
.colony-village-milestone-bar {
    margin-top: 0.35rem;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--village-accent) 18%, var(--bg-surface));
    overflow: hidden;
}
.colony-village-milestone-bar i {
    display: block;
    height: 100%;
    background: var(--village-accent);
}
.colony-village-digest {
    margin-top: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.colony-village-digest-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--village-accent);
}
.colony-village-digest-text,
.colony-village-digest-empty {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.colony-village-panel--want {
    border-top: 1px solid var(--border-soft);
}
.colony-village-want-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.colony-village-want-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.45rem;
    align-items: center;
    font-size: 0.82rem;
}
.colony-village-want-game {
    font-weight: 800;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.colony-village-want-who {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.colony-village-want-empty {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.card-want-overlay {
    position: absolute;
    top: 0.45rem;
    right: 2.6rem;
    z-index: 2;
}
.colony-village-pulse-item--want .colony-village-pulse-dot {
    background: #db2777;
}



/* WAVE 4 ?X tonight table / celebrate / chat teaser / role legend */
.colony-village-celebrate {
    margin: 0.55rem 0 0.35rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #b45309 35%, var(--border-soft));
    background: color-mix(in srgb, #b45309 10%, var(--card-bg));
    color: #92400e;
    font-size: 0.82rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    align-items: baseline;
}
.colony-village-chat-teaser {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--village-accent, #1f5a85) 35%, var(--border-soft));
    background: color-mix(in srgb, var(--village-accent, #1f5a85) 8%, var(--card-bg));
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.colony-village-panel--tonight {
    margin-top: 0.75rem;
}
.colony-village-tonight-card,
.colony-village-tonight-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
}
.colony-village-tonight-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.colony-village-tonight-copy strong { font-size: 0.82rem; }
.colony-village-tonight-copy span { font-size: 0.9rem; font-weight: 700; }
.colony-village-tonight-copy time,
.colony-village-tonight-hint,
.colony-village-tonight-empty {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.colony-village-tonight-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    width: 100%;
}
.colony-village-tonight-pick {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.4rem 0.65rem;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
}
.colony-village-tonight-pick span {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
}
.lib-members-role-legend {
    margin: 0.35rem 0 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px dashed var(--border-soft);
    background: color-mix(in srgb, var(--bg-surface) 80%, var(--card-bg));
    font-size: 0.72rem;
    color: var(--text-muted);
}
.lib-members-role-legend strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-main);
    font-size: 0.76rem;
}
.lib-members-role-legend ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}
.lib-members-role-legend li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.lib-members-role-legend .lib-member-role-dot {
    position: static;
    border: none;
    width: 8px;
    height: 8px;
}

/* WAVE 5 ?X tonight states / digest share / visitor / checklist */
.colony-village-digest-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
    width: 100%;
}
.colony-village-digest-share {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
}
.colony-village-digest-share:hover {
    color: var(--text-main);
    border-color: color-mix(in srgb, var(--village-accent, #1f5a85) 40%, var(--border-soft));
}
.colony-village-tonight-card--live {
    position: relative;
    width: 100%;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--village-accent, #1f5a85) 35%, var(--border-soft));
    background: color-mix(in srgb, var(--village-accent, #1f5a85) 8%, var(--card-bg));
}
.colony-village-tonight-badge {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, #15803d 18%, var(--card-bg));
    color: #15803d;
    font-size: 0.65rem;
    font-weight: 800;
}
.colony-village-tonight-sub {
    margin: 0.2rem 0 0;
    font-size: 0.68rem;
    color: var(--text-muted);
}
.colony-village-tonight-empty-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px dashed var(--border-soft);
    background: color-mix(in srgb, var(--bg-surface) 70%, var(--card-bg));
}
.colony-village-tonight-empty-card strong {
    font-size: 0.85rem;
}
.colony-village-want-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.colony-village-visitor-gate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    margin: 0.65rem 0 0.35rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    border: 2px solid color-mix(in srgb, var(--village-accent, #1f5a85) 45%, var(--border-soft));
    background: color-mix(in srgb, var(--village-accent, #1f5a85) 10%, var(--card-bg));
}
.colony-village-visitor-copy {
    flex: 1;
    min-width: 12rem;
}
.colony-village-visitor-copy strong {
    display: block;
    font-size: 0.9rem;
}
.colony-village-visitor-copy p {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.colony-village-visitor-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, #b45309 16%, var(--card-bg));
    color: #b45309;
    font-size: 0.65rem;
    font-weight: 800;
}
.colony-village-panel--visitor-tease {
    margin-top: 0.75rem;
}
.colony-village-visitor-tease-copy {
    margin: 0 0 0.65rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.colony-village-panel--checklist {
    margin: 0.75rem 0 0;
}
.colony-village-checklist-progress {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--village-accent, #1f5a85);
}
.colony-village-checklist-desc {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.colony-village-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}
.colony-village-checklist-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
}
.colony-village-checklist-item.is-done {
    opacity: 0.72;
    border-style: dashed;
}
.colony-village-checklist-mark {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--border-soft);
    flex-shrink: 0;
    box-sizing: border-box;
}
.colony-village-checklist-item.is-done .colony-village-checklist-mark {
    border-color: #15803d;
    background: #15803d;
    box-shadow: inset 0 0 0 2px var(--card-bg);
}
.colony-village-checklist-label {
    flex: 1;
    min-width: 8rem;
    font-size: 0.82rem;
    font-weight: 700;
}
body.colony-has-village-sticky .colony-village-sticky-back,
body.colony-has-village-sticky .colony-village-back-hub {
    display: none !important;
}

/* WAVE 6 ?X season badge / want overlap */
.colony-village-season-badge {
    margin-top: 0.4rem;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--village-accent, #1f5a85) 35%, var(--border-soft));
    background: color-mix(in srgb, var(--village-accent, #1f5a85) 10%, var(--card-bg));
    color: var(--text-main);
    font-size: 0.7rem;
    font-weight: 800;
}
.colony-village-season-badge[data-season="spring"] { border-color: color-mix(in srgb, #2e7d32 40%, var(--border-soft)); }
.colony-village-season-badge[data-season="summer"] { border-color: color-mix(in srgb, #b45309 40%, var(--border-soft)); }
.colony-village-season-badge[data-season="autumn"] { border-color: color-mix(in srgb, #c2410c 40%, var(--border-soft)); }
.colony-village-season-badge[data-season="winter"] { border-color: color-mix(in srgb, #1f5a85 40%, var(--border-soft)); }
.colony-village-panel--overlap { margin-top: 0.75rem; }
.colony-village-overlap-desc {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.colony-village-overlap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}
.colony-village-overlap-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
}
.colony-village-overlap-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.colony-village-overlap-copy strong { font-size: 0.85rem; }
.colony-village-overlap-copy span { font-size: 0.72rem; color: var(--text-muted); }
.colony-notify-social-section {
    margin-top: 0.65rem;
    padding-top: 0.45rem;
    border-top: 1px dashed var(--border-soft);
}

/* WAVE 7?8 ? starters / game night / invite poster / memories / brought / celebrate / lobby featured */
.colony-invite-poster-preview {
    margin-top: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
.colony-invite-poster-img {
    max-width: 100%;
    width: 240px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.colony-invite-poster-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}
.colony-village-panel--starters,
.colony-village-panel--gamenight,
.colony-village-panel--memories,
.colony-village-panel--brought {
    margin-top: 0.75rem;
}
.colony-village-starters-desc,
.colony-village-gamenight-desc,
.colony-village-gamenight-empty,
.colony-village-memories-desc,
.colony-village-brought-desc {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.colony-village-starters-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}
.colony-village-starter-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-align: left;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--village-accent, #1f5a85) 28%, var(--border-soft));
    background: color-mix(in srgb, var(--village-accent, #1f5a85) 7%, var(--card-bg));
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.colony-village-starter-btn:hover {
    border-color: var(--village-accent, #1f5a85);
}
.colony-village-gamenight-card {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
}
.colony-village-gamenight-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
}
.colony-village-gamenight-tag {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--village-accent, #1f5a85) 14%, var(--card-bg));
    color: var(--text-main);
}
.colony-village-gamenight-row strong { font-size: 0.88rem; }
.colony-village-gamenight-row span:last-child { font-size: 0.74rem; color: var(--text-muted); }
.colony-village-gamenight-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.colony-village-memories-strip {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.colony-village-memory {
    margin: 0;
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    scroll-snap-align: start;
    background: var(--card-bg);
}
.colony-village-memory img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.colony-village-brought-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}
.colony-village-brought-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
}
.colony-village-brought-rank {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    background: color-mix(in srgb, var(--village-accent, #1f5a85) 16%, var(--card-bg));
    flex-shrink: 0;
}
.colony-village-brought-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.colony-village-brought-copy strong { font-size: 0.85rem; }
.colony-village-brought-copy span { font-size: 0.72rem; color: var(--text-muted); }
.colony-village-panel--checklist.is-complete {
    border-color: color-mix(in srgb, #15803d 35%, var(--border-soft));
    background: color-mix(in srgb, #15803d 8%, var(--card-bg));
}
.colony-game-added-celebrate {
    position: fixed;
    left: 50%;
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 13080;
    width: min(92vw, 420px);
    pointer-events: none;
}
.colony-game-added-celebrate[hidden] { display: none !important; }
.colony-game-added-celebrate-inner {
    pointer-events: auto;
    padding: 0.85rem 1rem 0.75rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--village-accent, #1f5a85) 40%, var(--border-soft));
    background: color-mix(in srgb, var(--card-bg) 92%, #fff);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
    position: relative;
}
.colony-game-added-celebrate-inner strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}
.colony-game-added-celebrate-inner p {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.colony-game-added-celebrate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-right: 1.4rem;
}
.colony-game-added-celebrate-close {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    border: 0;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
}
.lobby-featured-colony {
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: 0.85rem;
    align-items: stretch;
    padding: 0.75rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #1f5a85 30%, var(--border-soft));
    background: color-mix(in srgb, #1f5a85 8%, var(--card-bg));
    cursor: pointer;
    margin-bottom: 0.35rem;
}
.lobby-featured-cover {
    border-radius: 10px;
    overflow: hidden;
    min-height: 110px;
    background: #0f172a;
}
.lobby-featured-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 110px;
}
.lobby-featured-kicker {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1f5a85;
}
.lobby-featured-title {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
}
.lobby-featured-desc {
    margin: 0 0 0.45rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.lobby-featured-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.55rem;
}
@media (max-width: 560px) {
    .lobby-featured-colony {
        grid-template-columns: 1fr;
    }
    .lobby-featured-cover {
        max-height: 140px;
    }
}

/* WAVE 9?10 ? ritual / footprint / mood / featured why / overflow */
.colony-village-ritual-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 0.65rem 0 0;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--village-accent, #1f5a85) 45%, var(--border-soft));
    background: color-mix(in srgb, var(--village-accent, #1f5a85) 8%, var(--card-bg));
}
.colony-village-ritual-copy {
    flex: 1;
    min-width: 10rem;
}
.colony-village-ritual-copy strong {
    display: block;
    font-size: 0.9rem;
}
.colony-village-ritual-copy p {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    color: var(--text-muted);
}
.colony-village-panel--footprint {
    margin: 0.75rem 0 0;
}
.colony-village-footprint-list {
    list-style: none;
    margin: 0 0 0.55rem;
    padding: 0;
    display: grid;
    gap: 0.3rem;
}
.colony-village-footprint-list li {
    font-size: 0.82rem;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--village-accent, #1f5a85) 6%, var(--card-bg));
    overflow-wrap: anywhere;
}
.colony-village-footprint-empty {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.colony-village-mood-line {
    margin: 0 0 0.45rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--village-accent, #1f5a85);
}
.colony-village-mood-row {
    display: grid;
    gap: 0.3rem;
}
.colony-village-mood-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
}
.colony-village-mood-edit {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.colony-village-mood-input {
    flex: 1;
    min-width: 8rem;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 0.82rem;
}
.colony-village-panel--checklist.is-collapsed .colony-village-checklist-desc {
    display: none;
}
.colony-village-checklist-compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}
.colony-village-checklist-compact h2 {
    margin: 0;
    flex: 1;
    min-width: 6rem;
}
.colony-village-hub-inner[data-hub-stage="starter"] .colony-village-panels {
    margin-top: 0.5rem;
}
.colony-village-panel,
.colony-village-pulse-text,
.colony-village-gamenight-row,
.colony-village-starter-btn span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.lobby-featured-why {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1f5a85;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.colony-hub-feature-teasers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}
.colony-hub-feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border-soft, #e2e8f0);
    background: color-mix(in srgb, #1f5a85 8%, transparent);
    font-size: 0.68rem;
    font-weight: 700;
    color: inherit;
}

/* WAVE 11 ? cohesion / degradation / mobile / resume */
.colony-village-social-locked-hint {
    margin: 0.45rem 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}
body.colony-social-writes-denied .btn-card-want,
body.colony-social-writes-denied .card-want-overlay {
    opacity: 0.42;
}
body.colony-social-writes-denied .colony-village-lfg-btn[disabled],
body.colony-social-writes-denied .colony-village-cta[disabled],
body.colony-social-writes-denied .colony-village-sticky-btn[disabled],
body.colony-social-writes-denied .colony-village-panel-link[disabled],
body.colony-social-writes-denied .colony-village-tonight-pick[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}
.lobby-library-live--resume {
    background: color-mix(in srgb, #1f5a85 16%, var(--card-bg));
    color: #1f5a85;
    border-color: color-mix(in srgb, #1f5a85 35%, var(--border-soft));
}
.lobby-library-card.is-resume-last {
    box-shadow: 0 0 0 2px color-mix(in srgb, #1f5a85 28%, transparent);
}
@media (max-width: 560px) {
    .colony-village-sticky {
        max-width: calc(100vw - 0.6rem);
        padding: 0.28rem;
        gap: 0.15rem;
        bottom: calc(0.45rem + env(safe-area-inset-bottom, 0px));
        border-radius: 18px;
    }
    .colony-village-sticky-btn {
        min-width: 2.7rem;
        padding: 0.28rem 0.32rem;
        font-size: 0.55rem;
    }
    .colony-village-sticky-btn span {
        max-width: 3.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.colony-has-village-sticky .main-content,
    body.colony-has-village-sticky #libraryView,
    body.colony-has-village-sticky #gamesGrid {
        padding-bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
    }
    .colony-game-added-celebrate {
        bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px));
        width: min(96vw, 420px);
        left: 50%;
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    .colony-game-added-celebrate-actions {
        flex-direction: column;
        align-items: stretch;
        padding-right: 0;
    }
    .colony-invite-modal-content {
        max-height: min(92dvh, calc(100dvh - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
        overflow-y: auto;
        padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
        margin: max(0.5rem, env(safe-area-inset-top, 0px)) 0.5rem max(0.5rem, env(safe-area-inset-bottom, 0px));
    }
    .colony-invite-poster-img {
        width: min(100%, 220px);
    }
    .colony-invite-poster-actions {
        width: 100%;
    }
    .colony-invite-poster-actions .btn {
        flex: 1 1 auto;
        min-width: 42%;
    }
    .colony-village-cta-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }
    .colony-village-cta-row .colony-village-cta--primary {
        grid-column: 1 / -1;
    }
}


/* --- LFG-aligned polish: full-surface cream / green chrome --- */
html:not([data-tm-scheme="dark"]) {
    --color-brand: #059669;
    --primary: #059669;
    --primary-hover: #047857;
    --primary-soft: #d1fae5;
    --bg-main: #FBF6EC;
    --card-bg: #fffef9;
    --border-soft: #e2d6c4;
    --border-color: #e2d6c4;
    --border-dark: #e2d6c4;
}

/* Soften remaining neo-brutalist chrome in light mode */
html:not([data-tm-scheme="dark"]) .main-header,
html:not([data-tm-scheme="dark"]) .main-tabs,
html:not([data-tm-scheme="dark"]) .settings-card,
html:not([data-tm-scheme="dark"]) .detail-panel,
html:not([data-tm-scheme="dark"]) .colony-handoff-banner,
html:not([data-tm-scheme="dark"]) .colony-announcement-banner,
html:not([data-tm-scheme="dark"]) .colony-remote-container,
html:not([data-tm-scheme="dark"]) .colony-shelf-tray,
html:not([data-tm-scheme="dark"]) .colony-members-hub,
html:not([data-tm-scheme="dark"]) .colony-notify-list,
html:not([data-tm-scheme="dark"]) .colony-contributions-panel,
html:not([data-tm-scheme="dark"]) .colony-merchant-panel,
html:not([data-tm-scheme="dark"]) .colony-mpub-card,
html:not([data-tm-scheme="dark"]) .colony-village-panel,
html:not([data-tm-scheme="dark"]) .colony-chat-shell,
html:not([data-tm-scheme="dark"]) .colony-draw-card,
html:not([data-tm-scheme="dark"]) .filter-panel,
html:not([data-tm-scheme="dark"]) .advanced-filters,
html:not([data-tm-scheme="dark"]) .lib-create-card,
html:not([data-tm-scheme="dark"]) .onboarding-card {
    border-color: var(--border-soft) !important;
}

html:not([data-tm-scheme="dark"]) .btn-top,
html:not([data-tm-scheme="dark"]) .btn-add-game,
html:not([data-tm-scheme="dark"]) .btn-sync-cloud,
html:not([data-tm-scheme="dark"]) .btn-edit-mode,
html:not([data-tm-scheme="dark"]) .btn-colony-handoff-login,
html:not([data-tm-scheme="dark"]) .colony-dialog-btn,
html:not([data-tm-scheme="dark"]) .colony-embed-inline-subnav-fab,
html:not([data-tm-scheme="dark"]) .colony-shelf-place-fab,
html:not([data-tm-scheme="dark"]) .colony-editor-save-fab {
    border-radius: 999px;
    box-shadow: 2px 2px 0 rgba(44, 34, 30, 0.18);
}

.btn-top,
.btn-add-game,
.btn-sync-cloud {
    border-radius: 999px;
    box-shadow: 2px 2px 0 rgba(44, 34, 30, 0.18);
}

.btn-add-game,
.btn-sync-cloud {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
}

.btn-colony-handoff-login {
    background: var(--primary-hover, #047857) !important;
    border-color: var(--primary-hover, #047857) !important;
    border-radius: 999px !important;
    color: #fff !important;
}

.user-profile-badge {
    background-color: var(--color-brand);
}

.lib-switcher-card,
.colony-main-chrome-actions .header-refresh-btn,
.filter-toggle-btn,
.sort-wrapper select,
.cabinet-filter-wrapper select,
.sort-menu-trigger,
.cabinet-filter-trigger {
    border-color: var(--border-soft) !important;
    border-radius: 12px;
}

html.tm-embedded .sub-pill-bar,
html:not(.tm-embedded) body.colony-merchant-embed-active .sub-pill-bar {
    border-color: var(--border-soft);
    background: var(--card-bg);
}

html.tm-embedded .sub-pill-bar {
    border-top-color: var(--border-soft) !important;
}

.lobby-library-avatar {
    border-color: var(--border-soft);
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group textarea,
.form-group select,
.search-box-wrapper input,
.colony-dialog-input {
    border-color: var(--border-soft) !important;
    border-radius: 12px;
    background: var(--card-bg);
}

.colony-village-panels {
    border-top: 1px solid var(--border-soft);
}

.empty-state-hint,
.colony-sticky-bar-context {
    color: var(--color-brand);
}

/* Guest / signed banners like lfg-app */
.colony-handoff-banner {
    margin: 0.65rem 0 0.85rem;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.colony-handoff-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: #fff7ed;
    color: #9a3412;
    font-size: 0.82rem;
    font-weight: 700;
}

/* Chips / pills */
.filter-chip,
.tag-chip,
.colony-chip,
.view-mode-btn,
.density-btn {
    border-radius: 999px !important;
    border-color: var(--border-soft) !important;
}
.filter-chip.active,
.tag-chip.active,
.view-mode-btn.active,
.density-btn.active,
.colony-chip.is-on {
    background: var(--primary-soft, #d1fae5) !important;
    border-color: #6ee7b7 !important;
    color: #065f46 !important;
}

/* Detail / settings cards */
.detail-panel,
.settings-card,
.colony-mpub-card,
.colony-village-panel,
.colony-member-card,
.colony-notify-item,
.announcement-card,
.contribution-card {
    background: var(--card-bg);
    border: 1px solid var(--border-soft) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 0 rgba(44, 34, 30, 0.04) !important;
}

/* Merchant / chat shells */
.colony-merchant-embed-shell,
.colony-rules-embed-shell,
.colony-village-chat-shell,
.colony-chat-composer,
.colony-mpub-actions {
    border-color: var(--border-soft) !important;
    background: var(--card-bg);
}

.colony-chat-composer textarea,
.colony-mpub-form input,
.colony-mpub-form textarea,
.colony-mpub-form select {
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    background: var(--card-bg) !important;
}

/* FABs & floating actions — match lfg pill rhythm；欄內 gap 以 --colony-fab-gap 為準 */
.colony-embed-inline-subnav {
    gap: 0.55rem;
}
.colony-embed-mobile-fabs {
    gap: var(--colony-fab-gap, 14px);
}
.colony-embed-inline-subnav-fab,
.colony-shelf-place-fab,
.colony-editor-save-fab,
.colony-mobile-fab {
    border-radius: 999px !important;
    box-shadow: 3px 3px 0 rgba(44, 34, 30, 0.18) !important;
}
.colony-editor-save-fab,
.colony-shelf-place-fab {
    background: var(--primary-hover, #047857) !important;
    border-color: #065f46 !important;
    color: #fff !important;
}

/* Toast variants stay dark pill; keep semantic tint via left border only */
.colony-toast-success { box-shadow: inset 3px 0 0 #34d399; }
.colony-toast-error { box-shadow: inset 3px 0 0 #f87171; }
.colony-toast-warn { box-shadow: inset 3px 0 0 #fbbf24; }
.colony-toast-info { box-shadow: inset 3px 0 0 #6ee7b7; }

/* Lobby / list spacing closer to lfg cards */
.lobby-grid,
.games-grid {
    gap: 0.65rem;
}
.main-content {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

/* Onboarding / empty welcome */
.colony-onboarding-choice-btn,
.empty-state-actions .btn {
    border-radius: 999px;
    width: min(100%, 280px);
    justify-content: center;
}

/* Soften hard slate borders that still hardcode blue/slate */
html:not([data-tm-scheme="dark"]) [style*="border: 2px solid"],
html:not([data-tm-scheme="dark"]) .header-refresh-btn {
    border-color: var(--border-soft);
}

.header-refresh-btn {
    border-radius: 999px !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: none !important;
    background: var(--bg-main) !important;
}

/* Sub-pill desktop: pill shape like lfg chips */
@media (min-width: 801px) {
    .sub-pill-btn {
        border-radius: 999px;
    }
}

/* Footer / hint rhythm */
.colony-version-footer,
.colony-rules-link,
.colony-footer-hint {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0.5rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
.colony-version-footer a,
.colony-rules-link a {
    color: var(--color-brand);
    font-weight: 700;
    text-decoration: none;
}

/* Signed-in strip near lobby tools */
.colony-signed-strip,
.colony-temp-auth-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.65rem 0 0;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
    font-size: 0.82rem;
    font-weight: 700;
}


/* ========== Colony vNext shell (hub-first + progressive paint) ========== */
body[data-colony-shell='vnext'] .colony-village-hub-inner[data-colony-shell='vnext'],
body[data-colony-shell='vnext'] .colony-village-hub-inner {
    border: none;
    border-radius: 22px;
    box-shadow:
        0 1px 0 rgba(44, 34, 30, 0.05),
        0 18px 40px -28px rgba(15, 118, 110, 0.45),
        var(--shadow-flat);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--village-accent, #059669) 8%, var(--card-bg)) 0%, var(--card-bg) 42%);
}
body[data-colony-shell='vnext'] .colony-village-hero {
    min-height: 260px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
body[data-colony-shell='vnext'] .colony-village-cover {
    min-height: 260px;
}
body[data-colony-shell='vnext'] .colony-village-name {
    font-family: 'Noto Sans TC', 'Segoe UI', sans-serif;
    letter-spacing: -0.03em;
}
body[data-colony-shell='vnext'] .colony-village-cta-row--vnext {
    gap: 0.5rem;
    margin-top: 0.55rem;
}
body[data-colony-shell='vnext'] .colony-village-cta .icon-svg {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
body[data-colony-shell='vnext'] .colony-village-cta--main {
    border-color: color-mix(in srgb, var(--village-accent, #059669) 55%, var(--text-main));
    color: color-mix(in srgb, var(--village-accent, #059669) 75%, var(--text-main));
    background: color-mix(in srgb, var(--village-accent, #059669) 8%, var(--card-bg));
}
body[data-colony-shell='vnext'] .colony-village-kicker .icon-svg,
body[data-colony-shell='vnext'] .colony-village-public-pill .icon-svg {
    width: 0.95em;
    height: 0.95em;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.12em;
}
body[data-colony-shell='vnext'] .colony-village-sticky .icon-svg,
body[data-colony-shell='vnext'] .colony-village-back-hub .icon-svg {
    width: 1.05em;
    height: 1.05em;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.colony-village-hub-skeleton .colony-village-skel-pulse {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--village-accent, #059669) 18%, transparent), transparent);
    background-size: 200% 100%;
    animation: colonyHubSkelShimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
}
.colony-village-hub-skeleton .colony-village-skel-line {
    opacity: 0.72;
}
.colony-village-skel-chip {
    display: inline-block;
    width: 4.5rem;
    height: 0.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 22%, transparent);
    animation: colonyHubSkelShimmer 1.4s ease-in-out infinite;
}
@keyframes colonyHubSkelShimmer {
    0% { background-position: 100% 0; opacity: 0.55; }
    50% { opacity: 1; }
    100% { background-position: -100% 0; opacity: 0.55; }
}
body[data-colony-shell='vnext'] .btn-back-tablemate--icon {
    border-radius: 12px;
    border: 2px solid var(--text-main);
    box-shadow: 2px 2px 0 rgba(44, 34, 30, 0.16);
}
@media (max-width: 800px) {
    body[data-colony-shell='vnext'] .colony-village-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    body[data-colony-shell='vnext'] .colony-village-cover {
        min-height: 148px;
    }
    body[data-colony-shell='vnext'] .colony-village-cover-shade {
        background: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--card-bg) 92%, transparent) 100%);
    }
}

/* Labeled back-to-main (sidebar) */
body[data-colony-shell='vnext'] #btnBackToTablemate.btn-back-tablemate--icon {
    width: auto;
    min-width: 40px;
    height: 36px;
    padding: 0 0.65rem;
    border-radius: 12px;
    gap: 0.35rem;
}
body[data-colony-shell='vnext'] #btnBackToTablemate .icon-svg {
    width: 1.05em;
    height: 1.05em;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body[data-colony-shell='vnext'] #btnBackToTablemate .btn-back-tablemate-label {
    font-size: 0.78rem;
    font-weight: 800;
}
body[data-colony-shell='vnext'] #colonyMobileBackBtn .icon-svg {
    width: 1.15em;
    height: 1.15em;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html.colony-vnext-boot body:not(.colony-has-village-hub):not(.colony-lobby-mode) #gamesGrid {
    min-height: 0;
}

/* 首屏載入：先藏次要 chrome，避免半掛載 sub-pill／空側欄白溝／工具列重疊 */
html.colony-vnext-boot .sub-pill-bar,
html.colony-vnext-boot .toolbar-row,
html.colony-vnext-boot #librarySearchFilterRow,
html.colony-vnext-boot .sidebar,
html.colony-vnext-boot .colony-sticky-bar,
html.colony-vnext-boot #colony-embed-mobile-fabs,
html.colony-vnext-boot .colony-village-sticky,
body.colony-lib-loading .sub-pill-bar,
body.colony-lib-loading .toolbar-row,
body.colony-lib-loading #librarySearchFilterRow,
body.colony-lib-loading .sidebar,
body.colony-lib-loading #colony-embed-mobile-fabs {
    display: none !important;
}

html.colony-vnext-boot body,
html.colony-vnext-boot body.colony-has-sidebar,
body.colony-lib-loading,
body.colony-lib-loading.colony-has-sidebar {
    padding-left: 0 !important;
}

/* 優先預覽：HTML 靜態大廳立刻可見；藏全螢幕「正在載入桌遊庫」 */
html.colony-priority-preview #colonyVillageHub[hidden],
body.colony-has-village-hub:not(.colony-village-browse) #colonyVillageHub[hidden] {
    display: block !important;
}
html.colony-priority-preview body.colony-has-village-hub:not(.colony-village-browse) #gamesGrid .loading-state,
body.colony-has-village-hub:not(.colony-village-browse) #gamesGrid .loading-state--skel {
    display: none !important;
}
.loading-state--skel {
    gap: 0.55rem;
    padding: 1rem 0.85rem;
    border: none;
    background: transparent;
    box-shadow: none;
}
.colony-lib-skel-row {
    width: 100%;
    max-width: 42rem;
    height: 3.25rem;
    border-radius: 12px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--text-muted) 12%, transparent),
        color-mix(in srgb, var(--text-muted) 22%, transparent),
        color-mix(in srgb, var(--text-muted) 12%, transparent));
    background-size: 200% 100%;
    animation: colonyHubSkelShimmer 1.35s ease-in-out infinite;
}
.colony-lib-skel-hint {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}
html.colony-lib-browse-boot .loading-state .spinner,
html.colony-lib-browse-boot .loading-state > p:not(.colony-lib-skel-hint) {
    display: none !important;
}

/* 獨立頁：頂欄 LOGO 即回主站，側欄不再重複「回主站」 */
html.tm-colony-standalone #btnBackToTablemate {
    display: none !important;
}