:root {
    --viewport-height: 100vh;
    --viewport-top: 0px;
    --viewport-bottom-offset: 0px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    color-scheme: light;
    --bg: #eef4fb;
    --panel: #ffffff;
    --panel-soft: #f7faff;
    --text: #1f2a37;
    --muted: #6b7280;
    --line: #d8e2ee;
    --primary: #1d74f5;
    --primary-dark: #155bc2;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --shadow: 0 18px 44px rgba(48, 77, 109, 0.12);
}

@supports (height: 100dvh) { :root { --viewport-height: 100dvh; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.has-modal { overflow: hidden; }

* {
    box-sizing: border-box;
}

.auction-profile-entry {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    background: #eaf2ff;
    padding: 9px 14px;
    border-radius: 8px;
}

.homeland-extreme-estimate {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 8px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.homeland-extreme-estimate small { color: var(--muted); }

body {
    margin: 0;
    padding-inline: var(--safe-left) var(--safe-right);
    min-height: 100vh;
    color: var(--text);
    background:
        linear-gradient(135deg, rgba(29, 116, 245, 0.13), transparent 38%),
        linear-gradient(315deg, rgba(22, 163, 74, 0.10), transparent 42%),
        var(--bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    min-height: 36px;
    border: 0;
    border-radius: 6px;
    padding: 0 14px;
    color: #fff;
    background: var(--primary);
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}

button:hover {
    background: var(--primary-dark);
}

button:active {
    transform: translateY(1px);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

button.ghost {
    color: var(--primary);
    background: #eaf2ff;
}

button.ghost:hover {
    background: #dceaff;
}

button.danger {
    background: var(--danger);
}

button.danger:hover {
    background: #b91c1c;
}

button.success {
    background: var(--success);
}

button.success:hover {
    background: #15803d;
}

input,
select,
textarea {
    min-width: 0;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 12px;
    color: var(--text);
    background: #fff;
    outline: none;
}

textarea {
    height: auto;
    min-height: 110px;
    resize: vertical;
    padding: 10px 12px;
    line-height: 1.5;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(29, 116, 245, 0.14);
}

.site-banners {
    position: fixed;
    z-index: 1000;
    top: 78px;
    left: 50%;
    width: min(420px, calc(100vw - 20px));
    transform: translateX(-50%);
    display: grid;
    gap: 6px;
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 1px 1px 4px;
    filter: drop-shadow(0 8px 16px rgba(31, 42, 55, 0.18));
}

@media (min-width: 921px) {
    .site-banners.has-two-banners {
        width: min(850px, calc(100vw - 28px));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        align-items: start;
    }
}

.announcement-banner,
.featured-notice-banner {
    min-width: 0;
    border: 1px solid #bfd2ea;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
}

.featured-notice-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: #e5a862;
    border-radius: 12px;
    padding: 8px 12px;
    color: #643118;
    background:
        radial-gradient(circle at 90% 10%, rgba(253, 179, 159, 0.55), transparent 42%),
        linear-gradient(125deg, #fff8d7, #ffecd5 52%, #ffe6ed);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    animation: featured-notice-enter 0.35s ease-out;
}

.featured-notice-banner::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: featured-notice-shine 5s ease-in-out 3;
    pointer-events: none;
}

.featured-notice-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.featured-notice-spark {
    color: #ba5c12;
    font-size: 18px;
    line-height: 1;
}

.featured-notice-banner .featured-notice-heading strong {
    border-radius: 999px;
    padding: 3px 8px;
    color: #fff;
    background: linear-gradient(110deg, #b45210, #b12a53);
    font-size: 13px;
}

.featured-notice-banner .announcement-heading .icon-button {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    color: #713418;
    background: rgba(255, 255, 255, 0.65);
}

.featured-notice-banner .icon-button:hover {
    background: #fff;
}

.featured-notice-banner .announcement-content {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.45;
    max-height: 160px;
    max-height: min(20dvh, 160px);
}

@keyframes featured-notice-enter {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes featured-notice-shine {
    0%, 65% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .featured-notice-banner,
    .featured-notice-banner::before {
        animation: none;
    }
}

.announcement-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.announcement-heading strong {
    font-size: 16px;
}

.announcement-heading .icon-button {
    flex: 0 0 36px;
}

.announcement-content {
    margin: 10px 0 8px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    line-height: 1.65;
    max-height: 240px;
    max-height: min(26dvh, 240px);
    overflow-y: auto;
}

.announcement-banner small {
    display: block;
    color: var(--danger);
    font-size: 12px;
    line-height: 1.5;
}

.announcement-admin-card > label {
    display: block;
    margin: 12px 0 6px;
    color: var(--muted);
    font-size: 13px;
}

.announcement-admin-card .announcement-admin-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
}

.announcement-admin-toggle input {
    width: 18px;
    height: 18px;
}

.announcement-admin-card textarea {
    width: 100%;
}

.announcement-admin-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.app-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
    padding: 24px;
    border-right: 1px solid rgba(216, 226, 238, 0.85);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    display: block;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 8px;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 10px 24px rgba(29, 116, 245, 0.24);
}

.brand h1,
.brand p,
.topbar h2,
.hero-panel h3,
.section-title h3,
.empty-state h3 {
    margin: 0;
}

.brand h1 {
    font-size: 18px;
}

.brand p,
.hint,
.meta-line,
.pid,
.metric small,
.eyebrow {
    color: var(--muted);
}

.brand p,
.hint,
.metric small,
.pid {
    font-size: 12px;
}

.auth-panel,
.role-list,
.hero-panel,
.metric,
.action-panel,
.log-panel,
.empty-state {
    border: 1px solid rgba(216, 226, 238, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
}

.auth-panel {
    padding: 14px;
}

.auth-panel label {
    display: block;
    margin: 10px 0 6px;
    color: var(--muted);
    font-size: 13px;
}

.auth-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.auth-header span {
    font-weight: 800;
}

.auth-header small {
    color: var(--muted);
}

.auth-panel input,
.auth-panel button {
    width: 100%;
}

.auth-panel input.locked {
    border-color: #c9d5e3;
    color: #526175;
    background: #eef2f7;
    cursor: not-allowed;
}

.auth-panel button {
    margin-top: 12px;
}

.auth-account-row {
    display: flex;
    gap: 8px;
}

.auth-account-row input {
    flex: 1;
    min-width: 0;
}

.auth-account-row select {
    flex: 0 0 34px;
    width: 34px;
    min-width: 0;
    padding: 0;
    color: transparent;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23526175' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.auth-account-row select option {
    color: var(--text);
    background: #fff;
}

.auth-panel .auth-remember-password {
    display: flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: 12px 0 0;
    cursor: pointer;
}

.auth-remember-password input {
    width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    accent-color: var(--primary);
}

.auth-captcha-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}

.email-code-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.email-code-row input { flex: 1; min-width: 0; }
.email-code-row button, .auth-panel .email-code-row button {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 12px;
    white-space: nowrap;
}

.auth-panel .auth-forgot-password { margin-top: 6px; font-size: 13px; }
.email-modal label { display: block; margin: 12px 0 6px; color: var(--muted); font-size: 13px; }
.email-modal input { width: 100%; }
.email-modal .auth-captcha-row button { flex: 1; padding: 8px; font-size: 12px; }
.profile-email-status { overflow-wrap: anywhere; }

.auth-captcha-row img {
    width: 220px;
    max-width: 70%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.auth-panel .auth-captcha-row button {
    width: auto;
    flex: 1;
    margin: 0;
    padding: 8px;
    font-size: 12px;
}

.hint {
    margin: 8px 0 0;
    line-height: 1.5;
}

.password-hint {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.password-hint.error {
    color: var(--danger);
}

.password-hint.ok {
    color: var(--success);
}

.tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
}

.tab {
    color: var(--muted);
    background: #edf3fb;
}

.tab.active {
    color: #fff;
    background: var(--primary);
}

.role-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
}

.role-list-header button {
    min-height: 30px;
    padding: 0 10px;
    color: var(--primary);
    background: #eaf2ff;
}

.role-list-actions {
    display: flex;
    gap: 8px;
}

.role-list {
    overflow: auto;
    flex: 1 1 auto;
    min-height: 180px;
    max-height: none;
    padding: 8px;
}

.modal.game-code-modal { width: min(480px, calc(100vw - 28px)); height: fit-content; border: 1px solid var(--line); border-radius: 12px; padding: 18px; color: var(--text); background: var(--panel); }
.game-code-modal[open] { display: grid; gap: 12px; }
.game-code-modal::backdrop { background: rgba(15, 23, 42, .45); }
.game-code-modal textarea, .game-code-entry textarea { box-sizing: border-box; width: 100%; resize: vertical; margin: 8px 0; }
.game-code-modal textarea { margin: 0; min-height: 100px; max-height: 240px; }
.game-code-modal .modal-header h3 { min-width: 0; margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.game-code-modal .modal-header .icon-button { flex: 0 0 32px; min-width: 32px; min-height: 32px; }
.game-code-modal .modal-actions, .game-code-modal .hint { margin: 0; }
.game-code-entry { display: grid; gap: 6px; }
.game-code-entry button { justify-self: start; }
.game-code-warning { margin: 0; padding: 12px; border-radius: 10px; background: rgba(245, 158, 11, .1); color: #b45309; font-size: 13px; line-height: 1.6; }
.game-code-accept { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.game-code-accept input { flex: 0 0 16px; width: 16px; height: 16px; padding: 0; margin: 2px 0 0; }

.role-card {
    display: grid;
    gap: 6px;
    width: 100%;
    margin: 0 0 8px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text);
    text-align: left;
    background: transparent;
}

.role-card:hover,
.role-card.active {
    border-color: #b9d4fb;
    background: #f1f7ff;
}

.role-card strong,
.role-card span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-card span {
    color: var(--muted);
    font-size: 12px;
}

.main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.topbar h2 {
    font-size: 22px;
}

.eyebrow {
    margin: 0 0 4px;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

#toolsBtn {
    min-width: 72px;
    font-weight: 800;
}

#toolsBtn.active {
    color: #fff;
    background: var(--primary);
}

.connection {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 0 10px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.8);
}

.connection.ok {
    color: #166534;
    background: #dcfce7;
}

.connection.bad {
    color: #991b1b;
    background: #fee2e2;
}

.network-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px auto;
    padding: 10px 14px;
    width: min(960px, calc(100% - 24px));
    border: 1px solid #f0c88d;
    border-radius: 10px;
    background: #fff8e8;
    color: #744512;
    font-size: 13px;
    line-height: 1.6;
}

.network-notice button {
    flex-shrink: 0;
}

.view {
    display: none;
}

.view.active {
    display: block;
}

.hidden {
    display: none !important;
}

.role-detail {
    display: grid;
    gap: 10px;
}

.config-detail {
    display: grid;
    gap: 16px;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
}

.hero-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 74px;
    padding: 12px 14px;
}

.config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 118px;
    padding: 22px;
    border: 1px solid rgba(216, 226, 238, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
}

.config-header h3 {
    margin: 0;
    font-size: 26px;
}

.config-header > div {
    min-width: 0;
    max-width: 100%;
}

#configRoleMeta {
    overflow-wrap: anywhere;
}

.config-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.config-expand-control {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.config-hint {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.config-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.config-toolbar {
    position: sticky;
    top: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(216, 226, 238, 0.92);
    border-radius: 8px;
    background: rgba(248, 250, 252, 0.96);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
}

.config-category-bar {
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.config-search {
    position: relative;
    display: flex;
    flex: 0 1 280px;
    min-width: 190px;
    align-items: center;
}

.config-search-icon {
    position: absolute;
    left: 12px;
    width: 13px;
    height: 13px;
    border: 2px solid #64748b;
    border-radius: 50%;
    pointer-events: none;
}

.config-search-icon::after {
    position: absolute;
    right: -5px;
    bottom: -4px;
    width: 6px;
    height: 2px;
    border-radius: 2px;
    background: #64748b;
    content: "";
    transform: rotate(45deg);
}

.config-search input {
    width: 100%;
    min-height: 36px;
    padding-left: 36px;
    background: #fff;
}

.config-category-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 14px;
    color: #334155;
    background: #fff;
    font-weight: 800;
}

.config-update-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.config-update-count[hidden] { display: none; }

.config-category-tab:hover {
    color: var(--primary);
    border-color: #8bb7f3;
    background: #f7fbff;
}

.config-category-tab.active {
    color: #fff;
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: 0 8px 16px rgba(29, 116, 245, 0.18);
}

.config-section-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.config-section {
    overflow: hidden;
    border: 1px solid rgba(216, 226, 238, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
}

.config-section-toggle {
    display: flex;
    width: 100%;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 0;
    border-radius: 0;
    color: var(--text);
    background: #fff;
    text-align: left;
}

.config-section-toggle:hover,
.config-section-toggle:focus-visible {
    color: var(--primary);
    background: #f7fbff;
}

.config-section-toggle h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 16px;
}

.config-section-chevron {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 160ms ease;
}

.config-section.expanded .config-section-chevron {
    transform: rotate(225deg);
}

.config-section-content {
    border-top: 1px solid #e6edf6;
}

.config-section-description {
    margin: 0;
    padding: 13px 16px 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.config-search-empty {
    padding: 24px 18px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: var(--muted);
    background: #fff;
    text-align: center;
}

.config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.config-field {
    display: grid;
    min-width: 0;
    gap: 8px;
    align-content: start;
    min-height: 78px;
    padding: 12px;
    border: 1px solid #e6edf6;
    border-radius: 8px;
    background: var(--panel-soft);
}

.config-field.disabled {
    opacity: 0.62;
    background: #f8fafc;
}

.config-field.wide {
    grid-column: 1 / -1;
}

.config-field > span:first-child {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.config-tooltip {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    margin-left: 5px;
    padding: 0;
    border: 1px solid #94a3b8;
    border-radius: 50%;
    color: #475569;
    background: #fff;
    font: 700 11px/1 sans-serif;
    vertical-align: middle;
    cursor: help;
}

.config-tooltip::after {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 0;
    width: min(320px, 72vw);
    padding: 9px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #f8fafc;
    background: #1f2937;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
    content: attr(data-tooltip);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.config-tooltip:hover::after,
.config-tooltip:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.config-field small,
.battle-preset-row small,
.challenge-task-control small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}

.challenge-task-row {
    min-height: 0;
}

.challenge-task-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 1fr);
    gap: 12px;
    align-items: end;
}

.challenge-task-control {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.challenge-task-control > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.competition-task-row {
    grid-template-columns: minmax(190px, 0.7fr) minmax(0, 2fr);
    gap: 14px;
    min-height: 0;
}

.competition-task-toggle,
.competition-task-types {
    display: grid;
    gap: 8px;
    min-width: 0;
    align-content: start;
}

.competition-task-toggle {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    padding-right: 14px;
    border-right: 1px solid #dbe5f1;
}

.competition-task-toggle > span,
.competition-task-types > span {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.competition-task-row small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}

.config-text-input {
    width: 100%;
}

.config-message {
    border: 1px solid rgba(216, 226, 238, 0.92);
    border-radius: 8px;
    padding: 18px;
    color: var(--muted);
    background: #fff;
}

.config-message.error {
    color: #991b1b;
    background: #fee2e2;
}

.config-section-empty {
    grid-column: 1 / -1;
    min-height: 58px;
    padding: 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: var(--muted);
    background: #f8fafc;
    font-size: 13px;
}

.switch-control {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 72px;
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    padding: 0;
    color: #64748b;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.9);
}

.switch-control:hover {
    border-color: #9bbced;
    color: var(--primary);
    background: #f8fbff;
}

.switch-control .switch-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 1;
    width: 28px;
    height: 24px;
    border-radius: 50%;
    background: #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    transition: transform 0.18s ease, background 0.18s ease;
}

.switch-label {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    height: 100%;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

.switch-label.on {
    color: #94a3b8;
}

.switch-label.off {
    color: #475569;
}

.switch-control.on {
    border-color: var(--primary);
    color: #fff;
    background: var(--primary);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.switch-control.on:hover {
    background: var(--primary-dark);
}

.switch-control.on .switch-thumb {
    background: #fff;
    transform: translateX(36px);
}

.switch-control.on .switch-label.on {
    color: var(--primary);
}

.switch-control.on .switch-label.off {
    color: rgba(255, 255, 255, 0.8);
}

.number-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.number-wrap input {
    width: min(180px, 100%);
}

.config-select {
    width: min(220px, 100%);
}

.config-time-input {
    width: min(220px, 100%);
}

.config-select-sequence {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.config-select-sequence label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.config-select-sequence label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.config-select-sequence .config-select {
    width: 100%;
}

.field-suffix {
    color: var(--muted);
    font-size: 12px;
}

.choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.choice-row.compact {
    gap: 5px;
}

.config-searchable-options { min-width: 0; width: 100%; }
.config-options-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.config-options-toolbar input { flex: 1; min-width: 0; width: 100%; }
.config-options-toolbar small { flex-shrink: 0; color: var(--muted); }
.config-options-list { max-height: 220px; overflow-y: auto; padding: 2px; align-content: flex-start; }
.config-options-list .choice-chip[hidden] { display: none; }

.choice-row.disabled {
    opacity: 0.72;
}

.choice-chip {
    min-height: 32px;
    border: 1px solid #c7d8ef;
    border-radius: 6px;
    padding: 0 12px;
    color: #1e3a5f;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.choice-row.compact .choice-chip {
    min-height: 26px;
    border-radius: 5px;
    padding: 0 8px;
    font-size: 12px;
}

.choice-chip:hover {
    color: var(--primary);
    border-color: #8bb7f3;
    background: #f7fbff;
}

.choice-chip.selected {
    border-color: var(--primary);
    color: #fff;
    background: var(--primary);
    box-shadow: 0 6px 14px rgba(29, 116, 245, 0.18);
}

.choice-chip.selected:hover {
    color: #fff;
    background: var(--primary-dark);
}

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

.homeland-schedules {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 12px;
}

.homeland-schedule {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 12px;
    padding: 12px;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    background: #f8fbff;
}

.homeland-schedule-header {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) auto 42px;
    align-items: center;
    gap: 10px;
}

.homeland-schedule-time {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.homeland-schedule-time input {
    width: 126px;
}

.homeland-schedule-delete {
    min-width: 42px;
    min-height: 42px;
    color: #b42318;
    font-size: 22px;
}

.homeland-schedule-add {
    justify-self: start;
    min-height: 42px;
}

.homeland-schedule-empty {
    padding: 14px;
    border: 1px dashed #cbd8e8;
    border-radius: 8px;
    color: var(--muted);
    text-align: center;
}

.homeland-rule-card {
    display: grid;
    gap: 10px;
    min-height: 78px;
    padding: 10px;
    border: 1px solid #d7e3f2;
    border-radius: 8px;
    background: #fff;
}

.homeland-rule-name,
.homeland-rule-level {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.homeland-rule-name {
    align-items: flex-start;
    justify-content: flex-start;
    color: #1f2937;
    font-size: 13px;
    font-weight: 800;
}

.homeland-rule-name > span,
.homeland-rule-level > span:first-child {
    min-width: 0;
}

.homeland-rule-name small,
.homeland-rule-level small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
}

.homeland-rule-name input {
    width: 16px;
    height: 16px;
}

.homeland-rule-level span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.homeland-rule-level input {
    width: 48px;
    min-width: 48px;
    border: 0;
    border-radius: 0;
    padding: 0 2px;
    text-align: center;
    appearance: textfield;
}

.homeland-rule-level input::-webkit-inner-spin-button,
.homeland-rule-level input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.homeland-level-stepper {
    display: grid;
    grid-template-columns: 42px 48px 42px;
    align-items: stretch;
    overflow: hidden;
    min-height: 42px;
    border: 1px solid #cbd8e8;
    border-radius: 6px;
    background: #fff;
    flex: 0 0 auto;
    width: 134px;
    box-sizing: border-box;
}

.homeland-level-stepper button {
    min-width: 42px;
    min-height: 42px;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: #1e5fa8;
    background: #edf5ff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.homeland-level-stepper button:first-child {
    border-right: 1px solid #cbd8e8;
}

.homeland-level-stepper button:last-child {
    border-left: 1px solid #cbd8e8;
}

.homeland-level-stepper button:active {
    background: #dbeafe;
}

.battle-preset-card {
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 0;
    padding: 12px;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fbff, #eef6ff);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.battle-preset-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    padding-bottom: 7px;
}

.battle-preset-title strong {
    color: #1e3a5f;
    font-size: 13px;
}

.battle-preset-title span {
    color: var(--muted);
    font-size: 12px;
}

.battle-preset-controls {
    display: grid;
    gap: 7px;
}

.battle-preset-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 8px;
}

.battle-preset-row.disabled {
    opacity: 0.58;
}

.battle-preset-row > span {
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.time-list {
    display: grid;
    gap: 10px;
}

.inline-add {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inline-add input {
    width: 132px;
}

.hero-panel h3 {
    font-size: 20px;
}

.meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
}

.hero-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 10px;
    color: #374151;
    background: #e5e7eb;
    font-weight: 700;
    font-size: 12px;
}

.status-pill.running {
    color: #166534;
    background: #dcfce7;
}

.status-pill.stopped {
    color: #475569;
    background: #e2e8f0;
}

.status-pill.crashed,
.status-pill.kicked,
.status-pill.rateLimited,
.status-pill.error {
    color: #991b1b;
    background: #fee2e2;
}

.status-pill.starting,
.status-pill.waitingMemory,
.status-pill.waitingRestart,
.status-pill.stopping {
    color: #92400e;
    background: #fef3c7;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.metric {
    min-height: 76px;
    padding: 10px;
}

.metric span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.metric strong {
    display: block;
    margin: 5px 0;
    font-size: 21px;
    line-height: 1;
}

.action-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
}

.auto-refresh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: var(--muted);
    font-size: 13px;
}

.auto-refresh input {
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
}

.log-panel {
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(219, 234, 254, 0.72), rgba(238, 242, 255, 0.68)),
        #edf4fc;
    backdrop-filter: blur(12px);
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
}

.section-title h3 {
    font-size: 16px;
}

.log-layout {
    display: grid;
    grid-template-columns: 152px minmax(0, 1fr);
    height: clamp(480px, calc(100vh - 330px), 760px);
    border-top: 1px solid #e5eaf1;
    background: rgba(239, 246, 255, 0.58);
}

.log-tag-filter {
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-right: 1px solid #e5eaf1;
    background: rgba(226, 238, 252, 0.68);
    backdrop-filter: blur(10px);
}

.log-tag {
    min-height: 24px;
    border: 1px solid var(--tag-border, rgba(148, 163, 184, 0.28));
    border-radius: 6px;
    padding: 0 7px;
    color: var(--tag-color, #cbd5e1);
    text-align: left;
    background: var(--tag-bg, transparent);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.3;
}

.log-tag:hover,
.log-tag.active {
    color: var(--tag-color, var(--primary));
    border-color: var(--tag-color, var(--primary));
    background: var(--tag-bg, rgba(37, 99, 235, 0.10));
    box-shadow: inset 3px 0 0 var(--tag-color, var(--primary));
}

.tools-view {
    display: grid;
    gap: 14px;
}

.tool-shell {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 14px;
}

.tool-list {
    display: grid;
    align-content: start;
    gap: 8px;
    border: 1px solid rgba(216, 226, 238, 0.92);
    border-radius: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
}

.tool-list-item {
    width: 100%;
    color: var(--muted);
    text-align: left;
    background: #edf3fb;
}

.tool-list-item.active {
    color: #fff;
    background: var(--primary);
}

.merchant-path-view {
    display: grid;
    gap: 14px;
}

.activity-tree-view {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.activity-tree-panel {
    padding: 16px;
}

.activity-tree-panel h4 {
    margin: 0 0 12px;
    font-size: 16px;
}

.activity-tree-controls,
.activity-tree-gifts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.activity-tree-controls label,
.activity-tree-gift {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}

.activity-tree-controls input,
.activity-tree-controls select,
.activity-tree-gift input {
    width: 100%;
}

#activityTreeReverseControls {
    margin-top: 12px;
    align-items: end;
}

.war-season-damage-controls label { min-width: 0; align-content: start; }
.war-season-damage-value { display: grid; grid-template-columns: minmax(0, 1fr) 82px; gap: 8px; }
.war-season-damage-value input { min-width: 0; }
.war-season-damage-controls small { font-weight: 400; }

.mountain-query-form { display: grid; gap: 8px; }
.mountain-query-form > div { display: flex; gap: 8px; }
.mountain-query-form input { flex: 1; min-width: 0; }
.mountain-query-form button { flex-shrink: 0; }
.mountain-query-summary { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; }
.mountain-query-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.mountain-query-grid > * { padding: 8px; overflow-wrap: anywhere; }
.mountain-catalog-list { display: grid; gap: 8px; }
.mountain-catalog-list > details { min-width: 0; border: 1px solid var(--line); border-radius: 10px; }
.mountain-catalog-list > details > summary { padding: 12px; cursor: pointer; font-size: 14px; overflow-wrap: anywhere; }
.mountain-catalog-list > details > div { padding: 0 12px 12px; }
.mountain-server-btn { display: grid; gap: 4px; min-height: 48px; text-align: left; }
.mountain-server-btn small { font-size: 11px; font-weight: 400; }
.mountain-server-btn[aria-pressed="true"] { background: var(--primary); color: #fff; }
.mountain-server-unions:not(:empty) { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.mountain-server-unions h3 { margin: 0; font-size: 16px; }
.mountain-union-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 12px 0; }
.mountain-union-list article { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); overflow-wrap: anywhere; }
.mountain-union-list dl { display: grid; gap: 6px; margin: 10px 0; font-size: 13px; }
.mountain-union-list dl div { display: flex; gap: 12px; justify-content: space-between; }
.mountain-union-list dt { flex-shrink: 0; color: var(--muted); }
.mountain-union-list dd { margin: 0; text-align: right; }
.agent-record-section > summary,
.admin-add-agent > summary { cursor: pointer; font-size: 16px; font-weight: 700; }
.agent-record-section { min-width: 0; }
.agent-tree-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 8px 0; font-size: 12px; color: var(--muted); }
.agent-tree-period { color: var(--primary); }
.agent-tree-viewport { overflow: auto; max-height: 360px; min-height: 80px; border: 1px solid var(--line); border-radius: 10px; cursor: grab; overscroll-behavior: contain; }
.agent-tree-viewport.dragging { cursor: grabbing; user-select: none; }
.agent-tree-world { width: max-content; min-width: 100%; padding: 12px; }
.agent-tree-list, .agent-tree-children { list-style: none; padding: 0; margin: 0; }
.agent-tree-node { display: flex; align-items: flex-start; position: relative; }
.agent-tree-children { border-left: 1px solid var(--line); margin-left: 14px; }
.agent-tree-children > li { margin: 5px 0 5px 14px; }
.agent-tree-children > .agent-tree-node::before { content: ""; position: absolute; top: 20px; left: -14px; width: 14px; height: 1px; background: var(--line); }
.agent-tree-card { display: flex; flex-direction: column; gap: 3px; width: 168px; flex-shrink: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.agent-tree-card span, .agent-tree-card small { font-size: 11px; color: var(--muted); }
.agent-tree-card-head { display: flex; align-items: center; gap: 4px; min-height: 22px; }
.agent-tree-card .agent-tree-card-head strong { min-width: 0; flex: 1; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.agent-tree-card-head .agent-tree-agent { flex-shrink: 0; color: var(--primary); }
.agent-tree-card .agent-tree-toggle { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; min-height: 0; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-soft); color: var(--primary); font-size: 17px; line-height: 1; box-shadow: none; }
.agent-tree-card .agent-tree-names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 11px; }
.agent-tree-card .agent-tree-meta { white-space: nowrap; font-size: 11px; }
.agent-tree-card .agent-tree-spend { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; padding-top: 3px; border-top: 1px solid var(--line); }
.agent-tree-spend b { color: var(--primary-dark); font-size: 12px; font-variant-numeric: tabular-nums; }
.agent-tree-root { border-color: var(--primary); }
.agent-tree-note { max-width: 220px; font-size: 13px; }
.agent-admin-tree { margin-top: 8px; width: 100%; }
.agent-admin-tree > summary { cursor: pointer; color: var(--primary); }
.agent-admin-row:has(.agent-admin-tree[open]) { display: block; }
.agent-admin-row:has(.agent-admin-tree[open]) .agent-admin-controls { margin-top: 12px; }
@media (max-width: 600px) {
    .agent-tree-viewport { max-height: 300px; }
    .agent-tree-world { padding: 8px; }
    .agent-tree-card { width: 150px; }
}
.agent-record-controls { display: flex; gap: 8px; margin: 12px 0; }
.agent-record-controls:empty { margin: 0; }
.admin-add-agent { margin: 12px 0 20px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.admin-add-agent > input { width: min(100%, 320px); margin-bottom: 12px; }
.agent-record-section .agent-money-table { width: 100%; }

.activity-tree-gifts {
    margin-top: 20px;
}

.activity-tree-gifts h4 {
    grid-column: 1 / -1;
    margin: 0;
}

.activity-tree-gift {
    grid-template-columns: minmax(0, 1fr) 90px;
    align-items: center;
    border-top: 1px solid var(--line);
    padding: 10px 0;
}

.activity-tree-gift small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-weight: 400;
}

.activity-tree-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.activity-tree-metrics div {
    border-left: 3px solid var(--primary);
    padding: 4px 10px;
}

.activity-tree-metrics small {
    display: block;
    color: var(--muted);
}

.activity-tree-metrics strong {
    display: block;
    margin-top: 3px;
    font-size: 20px;
}

.activity-tree-tiers {
    margin-top: 16px;
}

.activity-tree-tiers summary {
    color: var(--primary);
    cursor: pointer;
    font-weight: 700;
}

.activity-tree-tiers table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.activity-tree-tiers th,
.activity-tree-tiers td {
    border-bottom: 1px solid var(--line);
    padding: 8px;
}

.union-power-view {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.holy-land-groups-view {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
}
.holy-land-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.holy-land-heading h2 { margin: 0; font-size: 21px; }
.holy-land-heading button { flex: 0 0 auto; }
.holy-land-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.holy-land-tabs button { min-height: 42px; border: 1px solid #dce4e8; background: #fff; color: #66747c; }
.holy-land-tabs button.active { border-color: #316d69; background: #e6efed; color: #194f4b; }
.holy-land-controls { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 10px; align-items: center; }
.holy-land-controls select { width: 100%; min-height: 42px; }
.holy-land-halves { display: flex; border: 1px solid #dce4e8; border-radius: 6px; overflow: hidden; }
.holy-land-halves button { min-height: 40px; min-width: 90px; border: 0; border-radius: 0; background: #f5f7f8; color: #6b777e; }
.holy-land-halves button.active { background: #205b58; color: #fff; }
.holy-land-halves button:disabled { opacity: .45; cursor: not-allowed; }
.holy-land-period { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; border: 1px solid #e0e6e8; border-radius: 6px; background: #f7f9fa; padding: 12px; }
.holy-land-period select { min-width: min(100%, 290px); min-height: 38px; font-size: 14px; }
.holy-land-period span { color: var(--muted); font-size: 12px; }
.holy-land-group-list { display: grid; gap: 12px; }
.holy-land-group { min-width: 0; border: 1px solid #dde4e7; border-radius: 8px; background: #fff; overflow: hidden; }
.holy-land-group > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; background: #f8faf9; }
.holy-land-group > summary::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-right: 1.5px solid #87949a; border-bottom: 1.5px solid #87949a; transform: rotate(-45deg); }
.holy-land-group[open] > summary::after { transform: rotate(45deg); }
.holy-land-group > summary::-webkit-details-marker,
.holy-land-union > summary::-webkit-details-marker { display: none; }
.holy-land-group > summary strong { color: #8d7740; font-size: 16px; }
.holy-land-group > summary span { color: var(--muted); font-size: 13px; }
.holy-land-unions { padding: 0 16px; }
.holy-land-union { min-width: 0; border-top: 1px solid #e7ebec; }
.holy-land-union > summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 12px; align-items: center; gap: 10px; min-height: 62px; padding: 8px 0; cursor: pointer; list-style: none; }
.holy-land-union > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid #8b9699; border-bottom: 1.5px solid #8b9699; transform: rotate(-45deg); }
.holy-land-union[open] > summary::after { transform: rotate(45deg); }
.holy-land-place { color: #7a878a; font-size: 14px; text-align: center; }
.holy-land-union-main { display: grid; gap: 3px; min-width: 0; }
.holy-land-union-main strong { overflow-wrap: anywhere; font-size: 14px; font-weight: 600; }
.holy-land-union-main small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.holy-land-score { color: #927e42; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.holy-land-members { display: grid; padding: 0 0 10px 38px; }
.holy-land-union-detail { padding: 0 0 10px 38px; min-width: 0; }
.holy-land-union-detail h4 { margin: 12px 0 6px; font-size: 13px; }
.holy-land-union-detail .holy-land-members { padding: 0; }
.holy-land-match-scores { width: 100%; font-size: 12px; border-collapse: collapse; }
.holy-land-match-scores th, .holy-land-match-scores td { padding: 7px 8px; white-space: nowrap; text-align: left; border-bottom: 1px solid #edf1f2; }
.holy-land-members > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #edf1f2; font-size: 12px; }
.holy-land-members > div span { overflow-wrap: anywhere; }
.holy-land-members > div strong { flex: 0 0 auto; }
.holy-land-members p { margin: 6px 0; color: var(--muted); font-size: 12px; }
.holy-land-rank-list { min-width: 0; padding: 0 16px; }
.holy-land-rank-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 60px; padding: 8px 4px; border-top: 1px solid #e3e9eb; }
@media (max-width: 700px) {
    .holy-land-controls { grid-template-columns: minmax(0, 1fr) auto; }
    .holy-land-halves button { min-width: 68px; }
    .holy-land-period { display: grid; }
    .holy-land-unions, .holy-land-rank-list { padding: 0 10px; }
}
@media (max-width: 500px) {
    .holy-land-controls { grid-template-columns: 1fr; }
    .holy-land-halves button { flex: 1; }
    .holy-land-union-detail { padding-left: 0; }
    .holy-land-match-scores th, .holy-land-match-scores td { padding: 7px 4px; }
}

.union-power-header,
.union-power-panel {
    border: 1px solid rgba(216, 226, 238, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
}

.union-power-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
}

.union-power-header h3 {
    margin: 0;
    font-size: 24px;
}

.union-power-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 7px;
    color: var(--muted);
    font-size: 13px;
}

.union-access-note {
    width: fit-content;
    max-width: 100%;
    margin: 10px 0 0;
    border-left: 3px solid #94a3b8;
    padding: 5px 9px;
    color: #64748b;
    background: #f8fafc;
    font-size: 12px;
    line-height: 1.55;
}

.union-power-view.union-power-advanced .union-power-header,
.union-power-view.union-power-advanced .union-power-panel {
    border-color: rgba(202, 138, 4, 0.35);
    box-shadow: 0 10px 24px rgba(161, 98, 7, 0.08);
}

.management-badge { color: #854d0e; background: #fef3c7; border-radius: 5px; padding: 1px 5px; }
#adminManagementPanel { display: grid; gap: 16px; }
#adminManagementPanel.hidden { display: none; }
.topup-duration-controls { flex-wrap: wrap; }
.topup-duration-controls select { min-width: 120px; }
#managementRenewalCode { width: 100%; resize: vertical; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    #adminManagementPanel .admin-list-heading { flex-wrap: wrap; }
    #adminManagementSearch { width: 100%; }
    .topup-duration-controls select { width: 100%; }
}

.union-power-view.union-power-advanced .union-power-header {
    background: #fffbeb;
}

.union-power-view.union-power-advanced .union-access-note {
    border-left-color: #ca8a04;
    color: #854d0e;
    background: #fef3c7;
}

.union-power-view.union-power-advanced .union-power-toolbar,
.union-power-view.union-power-advanced .union-power-table th {
    background: #fffdf5;
}

.union-power-status {
    flex: 0 0 auto;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--muted);
    background: #f8fafc;
    font-weight: 750;
}

.union-power-status.ok {
    border-color: #86efac;
    color: #15803d;
    background: #f0fdf4;
}

.union-power-status.warn {
    border-color: #fcd34d;
    color: #a16207;
    background: #fffbeb;
}

.union-power-status.bad {
    border-color: #fca5a5;
    color: #b91c1c;
    background: #fef2f2;
}

.union-power-panel {
    overflow: hidden;
}

.union-power-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 300px) auto;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid #e6edf6;
}

.union-power-toolbar select,
.union-power-toolbar input {
    width: 100%;
}

.union-power-table-wrap {
    overflow-x: auto;
}

.union-power-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    table-layout: fixed;
}

.union-power-table th,
.union-power-table td {
    overflow: hidden;
    border-bottom: 1px solid #e6edf6;
    padding: 10px 12px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.union-power-table th {
    color: #475569;
    background: #f8fafc;
    font-size: 12px;
}

.union-power-table tbody tr:last-child td {
    border-bottom: 0;
}

.union-power-table th:first-child,
.union-power-table .union-rank {
    width: 68px;
    color: var(--muted);
}

.union-power-table .union-name {
    width: 30%;
    font-weight: 750;
}

.union-power-table .union-power {
    width: 24%;
    font-variant-numeric: tabular-nums;
}

.union-power-table .missing {
    color: #a16207;
}

.union-power-empty {
    padding: 30px !important;
    color: var(--muted);
    text-align: center !important;
}

.union-history-tabs { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--surface-line, #e6edf6); }
.union-history-tabs button { padding: 6px 14px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #657891; box-shadow: none; }
.union-history-tabs button.active { border-color: #ead9ae; background: #fff5d9; color: #926a21; }
#toolsView .union-power-toolbar.union-history-toolbar { grid-template-columns: minmax(0, 1fr); }
.union-history-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 14px 14px 4px; }
.union-history-controls label { display: grid; gap: 5px; min-width: 110px; color: #657891; font-size: 12px; }
.union-history-controls select { width: 100%; min-height: 36px; }
.union-history-controls .union-history-member { flex: 1; min-width: 150px; max-width: 360px; }
.union-history-controls button { min-height: 36px; }
.union-history-note { margin: 10px 14px; font-size: 12px; line-height: 1.7; color: #738298; }
.union-history-empty { padding: 20px 14px; margin: 0; color: #738298; font-size: 13px; }
.union-history-stat, .union-history-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 14px; font-size: 12px; color: #657891; }
.union-history-stat strong { color: #274466; font-size: 14px; }
.union-history-chart { position: relative; margin: 0 14px; overflow-x: auto; scrollbar-width: thin; }
.union-history-chart svg { display: block; width: 100%; }
.union-history-chart text { font-size: 12px; fill: #738298; }
.union-chart-grid { stroke: #e9edf3; stroke-width: 1; stroke-dasharray: 4 4; }
.union-history-chart circle { cursor: pointer; stroke: #fff; stroke-width: 1.5; }
.union-history-chart circle:hover, .union-history-chart circle:focus { stroke: #274466; stroke-width: 2; outline: none; }
.union-history-point-detail { position: absolute; z-index: 4; box-sizing: border-box; width: max-content; max-width: min(320px, calc(100% - 16px)); max-height: 260px; overflow: auto; padding: 12px 28px 12px 12px; border: 1px solid #e0e7ef; border-radius: 10px; background: #fff; box-shadow: 0 5px 20px #20395826; color: #657891; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.union-history-point-detail[hidden] { display: none; }
.union-history-tooltip-close { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #738298; font-size: 18px; box-shadow: none; }
.union-history-point-detail strong { font-weight: 500; color: #274466; }
.union-history-point-values { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; }
.union-history-point-detail ul { margin: 8px 0 0; padding-left: 18px; }
.union-history-point-detail small { display: block; color: #738298; }
.union-history-join { color: #438c7a; }
.union-history-leave { color: #ba6865; }
@media (max-width: 600px) {
    .union-history-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px 12px 4px; }
    .union-history-controls label, .union-history-controls .union-history-member { min-width: 0; max-width: none; }
    .union-history-note { margin: 10px 12px; }
    .union-history-chart { margin: 0 8px; }
    .union-history-stat { gap: 5px 12px; }
}

.union-insight-view {
    min-width: 0;
}

.union-insight-demo-notice {
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid #e7bd61;
    border-radius: 10px;
    background: #fff7e3;
    color: #714e16;
    font-size: 13px;
    line-height: 1.65;
}

.union-insight-demo-notice p {
    margin: 4px 0 0;
}

.union-insight-heading,
.union-insight-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.union-insight-heading h3 {
    margin: 0 0 4px;
    font-size: 21px;
}

.union-insight-heading p,
.union-insight-heading small,
.union-insight-note {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.union-insight-toolbar {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(150px, 1fr) auto;
    margin: 14px 0;
}

.union-insight-toolbar select,
.union-insight-toolbar input {
    width: 100%;
}

.union-insight-tabs {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
}

.union-insight-tabs button {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 8px 2px;
    background: transparent;
    color: var(--muted);
}

.union-insight-tabs button.active {
    border-bottom-color: #0f766e;
    color: #0f766e;
    font-weight: 700;
}

.union-insight-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.union-insight-actions span {
    flex: 1;
    min-width: 160px;
    color: var(--muted);
    font-size: 13px;
}

.union-insight-actions select {
    flex: 1;
    min-width: 180px;
}

.union-insight-note {
    margin-bottom: 12px;
}

.union-insight-list {
    display: grid;
    gap: 8px;
}

.union-insight-member {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.union-insight-member summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;
}

.union-insight-member summary::-webkit-details-marker {
    display: none;
}

.union-insight-member summary strong {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
}

.union-insight-tag {
    flex: 0 0 auto;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 3px 6px;
    color: #475569;
    background: #f8fafc;
    font-size: 12px;
}

.union-insight-tag.ok {
    border-color: #86efac;
    color: #166534;
    background: #f0fdf4;
}

.union-insight-tag.warn {
    border-color: #fca5a5;
    color: #b91c1c;
    background: #fef2f2;
}

.union-insight-tag.gold {
    border-color: #fcd34d;
    color: #92400e;
    background: #fffbeb;
}

.union-insight-expand {
    color: var(--muted);
    transition: transform 0.15s ease;
}

.union-insight-member[open] .union-insight-expand {
    transform: rotate(180deg);
}

.union-insight-details {
    border-top: 1px solid var(--line);
    padding: 8px 12px 12px;
    font-size: 13px;
    line-height: 1.6;
}

.union-insight-details p {
    margin: 4px 0;
}

.union-insight-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 10px;
}

.union-insight-detail-grid section {
    min-width: 0;
}

.union-insight-detail-grid h4 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 14px;
}

.union-insight-detail-grid h4 span {
    color: #0f766e;
}

.union-insight-table-wrap {
    overflow-x: auto;
}

.union-insight-table-wrap table {
    width: 100%;
    min-width: 320px;
    border-collapse: collapse;
    font-size: 12px;
}

.union-insight-table-wrap th,
.union-insight-table-wrap td {
    border-bottom: 1px solid var(--line);
    padding: 5px 6px;
    text-align: left;
    white-space: nowrap;
}

.union-insight-table-wrap th {
    color: var(--muted);
    font-weight: 600;
}

.union-insight-overview table {
    min-width: 680px;
}

.union-insight-overview td {
    vertical-align: top;
    padding: 10px 8px;
}

.union-insight-overview td:first-child {
    min-width: 150px;
}

.union-insight-overview small {
    display: block;
    color: var(--muted);
    white-space: normal;
    line-height: 1.4;
}

.union-insight-score-low {
    color: #b91c1c;
}

.union-insight-metric {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 12px;
}

.union-insight-event {
    margin-top: 8px;
    border-top: 1px solid var(--line);
    padding-top: 8px;
}

.union-insight-event > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.union-insight-event small {
    color: var(--muted);
}

@media (max-width: 1100px) {
    .union-insight-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .union-insight-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .union-insight-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .union-insight-toolbar select {
        grid-column: 1 / -1;
    }

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

.merchant-path-header,
.merchant-tool-panel {
    border: 1px solid rgba(216, 226, 238, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
}

.merchant-path-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
}

.merchant-path-header h3 {
    margin: 0;
    font-size: 24px;
}

.merchant-path-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.merchant-import-role {
    display: grid;
    gap: 6px;
    min-width: 0;
    max-width: 260px;
    font-size: 13px;
    color: var(--muted);
}

.merchant-import-role select {
    width: 100%;
    min-width: 0;
}

.merchant-chevron-open {
    transform: rotate(225deg);
}

.merchant-mobile-prices {
    display: none;
}

.merchant-price-shop-selector {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.merchant-mobile-price-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 13px;
}

.merchant-mobile-price-table th,
.merchant-mobile-price-table td {
    padding: 8px 14px;
    border-bottom: 1px solid #e6edf6;
    text-align: left;
}

.merchant-mobile-price-table .merchant-price-input {
    width: 100%;
    min-height: 42px;
}

.merchant-warning {
    position: sticky;
    top: 0;
    z-index: 10;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 11px 14px;
    color: #991b1b;
    background: #fee2e2;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(153, 27, 27, 0.12);
}

.merchant-tool-panel {
    overflow: hidden;
}

.merchant-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
}

.merchant-controls label {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.merchant-controls input,
.merchant-controls select {
    width: 100%;
}

.merchant-table-wrap {
    overflow-x: auto;
    width: 100%;
}

.merchant-price-table,
.merchant-result-table {
    width: 100%;
    min-width: 1780px;
    border-collapse: collapse;
    font-size: 13px;
}

.merchant-result-table {
    min-width: 760px;
}

.merchant-price-table th,
.merchant-price-table td,
.merchant-result-table th,
.merchant-result-table td {
    border-bottom: 1px solid #e6edf6;
    padding: 8px;
    text-align: left;
    vertical-align: middle;
}

.merchant-price-table thead th,
.merchant-result-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #334155;
    background: #f8fafc;
    font-weight: 800;
}

.merchant-price-table tbody th {
    color: var(--muted);
    font-weight: 700;
    white-space: nowrap;
}

.merchant-price-table .merchant-sticky-col {
    position: sticky;
    z-index: 2;
    background: #fff;
}

.merchant-price-table thead .merchant-sticky-col {
    z-index: 3;
    background: #f8fafc;
}

.merchant-id-col {
    left: 0;
    width: 76px;
    min-width: 76px;
}

.merchant-shop-col {
    left: 76px;
    width: 132px;
    min-width: 132px;
    box-shadow: 1px 0 0 #e6edf6;
}

.merchant-price-table small,
.merchant-result-table small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
}

.merchant-name-text {
    display: block;
    min-width: 120px;
    color: #0f172a;
    font-weight: 800;
    white-space: nowrap;
}

.merchant-price-input {
    width: 92px;
    text-align: right;
}

.merchant-result-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid #e6edf6;
    background: #f8fafc;
}

.merchant-result-summary span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    border: 1px solid #dbe6f3;
    border-radius: 6px;
    padding: 0 10px;
    color: var(--muted);
    background: #fff;
}

.merchant-result-summary strong {
    color: #0f172a;
}

.merchant-path-result-empty {
    padding: 16px;
    color: var(--muted);
    background: #fff;
}

#logContent {
    overflow: auto;
    height: 100%;
    margin: 0;
    padding: 12px 14px;
    color: #27364a;
    background:
        linear-gradient(135deg, rgba(239, 246, 255, 0.68), rgba(245, 243, 255, 0.58)),
        rgba(241, 245, 249, 0.78);
    backdrop-filter: blur(10px);
    font-size: 13px;
    font-weight: 550;
    line-height: 1.72;
    white-space: pre-wrap;
}

.log-line {
    min-height: 19px;
    border-bottom: 1px solid #f1f4f8;
    white-space: pre-wrap;
}

.log-inline-tag {
    display: inline-block;
    border: 1px solid var(--tag-border, rgba(148, 163, 184, 0.32));
    border-radius: 5px;
    padding: 0 4px;
    color: var(--tag-color, #cbd5e1);
    background: var(--tag-bg, rgba(148, 163, 184, 0.14));
    font-weight: 700;
    line-height: 1.35;
}

.admin-detail {
    display: grid;
    gap: 16px;
}

.admin-section-nav {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    border-bottom: 1px solid #dbe4ef;
    padding: 0 2px 8px;
    scrollbar-width: thin;
}

.admin-section-nav button {
    flex: 0 0 auto;
    border: 1px solid transparent;
    padding: 8px 14px;
    color: #526174;
    background: transparent;
    box-shadow: none;
}

.admin-section-nav button:hover {
    border-color: #dbe5f1;
    color: #1f4f8f;
    background: #f5f8fc;
}

.admin-section-nav button.active {
    border-color: #cbdcf2;
    color: #164c8c;
    background: #eaf3ff;
}

.admin-panel {
    min-width: 0;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-card {
    overflow: hidden;
    border: 1px solid rgba(216, 226, 238, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
}

.admin-card-wide {
    grid-column: 1 / -1;
}

.admin-content {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.admin-list-heading {
    align-items: flex-end;
    padding: 14px;
}

.admin-list-heading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.admin-list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-search {
    width: min(320px, 38vw);
}

.topup-duration-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.topup-generator textarea {
    width: 100%;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
}

.topup-generator-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.topup-generator-actions .hint {
    margin: 0;
}

.admin-scroll-list {
    display: grid;
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-stats div,
.credential-box {
    border: 1px solid #e6edf6;
    border-radius: 8px;
    padding: 10px;
    background: var(--panel-soft);
}

.union-group-editor {
    border: 1px solid #e6edf6;
    border-radius: 8px;
    background: var(--panel-soft);
}

.union-group-summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    gap: 12px;
    padding: 10px 42px 10px 12px;
    cursor: pointer;
    list-style: none;
}

.union-group-summary::-webkit-details-marker {
    display: none;
}

.union-group-summary::after {
    position: absolute;
    right: 18px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.16s ease;
    content: "";
}

.union-group-editor[open] > .union-group-summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

.union-group-summary > span {
    display: flex;
    align-items: baseline;
    min-width: 0;
    gap: 10px;
}

.union-group-summary strong {
    overflow: hidden;
    color: #0f172a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.union-group-summary small {
    flex: 0 0 auto;
    color: var(--muted);
}

.union-group-body {
    display: grid;
    gap: 12px;
    border-top: 1px solid #e6edf6;
    padding: 12px;
}

.union-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.union-group-heading > input {
    width: min(360px, 100%);
}

.union-group-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.union-group-option {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
    border: 1px solid #dbe5f1;
    border-radius: 6px;
    padding: 8px 10px;
    background: #fff;
}

.union-group-option input {
    flex: 0 0 auto;
}

.union-group-option span {
    min-width: 0;
    overflow: hidden;
    color: #334155;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.union-group-option small {
    color: var(--muted);
}

.invite-code {
    display: inline-flex;
    margin: 2px 0 6px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 6px;
    padding: 5px 8px;
    color: #1d4ed8;
    background: #eff6ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
}

.admin-role-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.admin-role-item {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel-soft);
}

.admin-role-expiry {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.admin-role-expiry input {
    width: 190px;
}

.reset-password-box {
    display: inline-flex;
    margin: 6px 0 2px;
    border: 1px solid rgba(22, 163, 74, 0.22);
    border-radius: 6px;
    padding: 5px 8px;
    color: #15803d;
    background: #ecfdf5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
}

.admin-stats span,
.admin-row span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.admin-stats strong {
    display: block;
    margin-top: 4px;
    font-size: 16px;
}

.admin-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    border: 1px solid #e6edf6;
    border-radius: 8px;
    padding: 12px;
    background: var(--panel-soft);
}

.admin-row strong {
    display: block;
    margin-bottom: 4px;
}

.admin-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.credential-box {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    color: #334155;
    font-size: 13px;
    word-break: break-all;
}

.empty-state {
    display: grid;
    place-items: center;
    min-height: 280px;
    padding: 36px;
    text-align: center;
}

.empty-state p {
    margin: 8px 0 0;
    color: var(--muted);
}

.toast {
    position: fixed;
    right: 20px;
    bottom: calc(var(--viewport-bottom-offset) + 20px + var(--safe-bottom));
    z-index: 1110;
    max-width: min(420px, calc(100vw - 40px));
    border-radius: 8px;
    padding: 12px 14px;
    color: #fff;
    background: #1f2937;
    box-shadow: var(--shadow);
}

.toast.error {
    background: var(--danger);
    top: max(16px, env(safe-area-inset-top));
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.toast.success {
    background: var(--success);
}

.toast.config-save {
    top: max(16px, env(safe-area-inset-top));
    right: auto;
    bottom: auto;
    left: 50%;
    z-index: 1110;
    transform: translateX(-50%);
    text-align: center;
}

.onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
}

.onboarding-focus {
    position: fixed;
    z-index: 301;
    border: 2px solid #f3b638;
    border-radius: 8px;
    box-shadow: 0 0 0 100vmax rgba(13, 25, 39, 0.58), 0 0 0 4px rgba(243, 182, 56, 0.2);
    pointer-events: none;
}

.onboarding-card {
    position: fixed;
    z-index: 302;
    width: min(340px, calc(100vw - 32px));
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    padding: 18px;
    color: var(--text);
    background: #fff;
    box-shadow: 0 18px 48px rgba(13, 25, 39, 0.3);
    max-height: calc(var(--viewport-height) - var(--safe-top) - var(--safe-bottom) - 32px);
    overflow-y: auto;
}

.onboarding-progress {
    color: var(--muted);
    font-size: 12px;
}

.onboarding-card h2 {
    margin: 7px 0 8px;
    font-size: 19px;
}

.onboarding-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.onboarding-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.tutorial-fab {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: calc(var(--viewport-bottom-offset) + max(20px, var(--safe-bottom)));
    z-index: 15;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--primary);
    background: var(--panel);
    box-shadow: 0 4px 16px rgba(48, 77, 109, 0.18);
    font-size: 24px;
    font-weight: 600;
}

.tutorial-fab:hover {
    background: #eaf2ff;
}

.tutorial-fab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.tutorial-window {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: calc(var(--viewport-bottom-offset) + max(20px, var(--safe-bottom)) + 56px);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    width: min(560px, calc(100vw - 40px));
    height: min(620px, calc(var(--viewport-height) - 160px));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 12px 40px rgba(48, 77, 109, 0.22);
}

.tutorial-window-header {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 12px;
    min-height: 54px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
}

.tutorial-window-header h2 {
    flex: 1;
    margin: 0;
    font-size: 16px;
}

.tutorial-window-header a {
    flex-shrink: 0;
    color: var(--primary);
    font-size: 12px;
    text-decoration: none;
}

.tutorial-window-header a:hover {
    text-decoration: underline;
}

.tutorial-window-header button {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

.tutorial-window iframe {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: 0;
    background: #fff;
}

.modal-backdrop {
    position: fixed;
    inset: var(--viewport-top) 0 auto;
    height: var(--viewport-height);
    z-index: 1050;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left));
    background: rgba(15, 23, 42, 0.36);
}

.modal {
    width: min(480px, 100%);
    border: 1px solid rgba(216, 226, 238, 0.92);
    border-radius: 8px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
    min-width: 0;
    min-height: 0;
    overflow-wrap: anywhere;
    scroll-padding-block: 12px;
}

.modal-backdrop > .modal { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
dialog.modal {
    position: fixed;
    top: calc(var(--viewport-top) + var(--safe-top) + 12px);
    bottom: calc(100% - var(--viewport-top) - var(--viewport-height) + var(--safe-bottom) + 12px);
    left: var(--safe-left);
    right: var(--safe-right);
    margin: auto;
    max-width: calc(100% - var(--safe-left) - var(--safe-right) - 24px);
    max-height: calc(var(--viewport-height) - var(--safe-top) - var(--safe-bottom) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-header,
.modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-header > div { min-width: 0; }
.modal-header > .icon-button { flex: 0 0 36px; }
.modal input:not([type="checkbox"]):not([type="radio"]), .modal select, .modal textarea { min-width: 0; max-width: 100%; }

.no-video-notice-modal, .cast-sword-target-notice-modal { width: min(480px, calc(100% - 32px)); color: var(--text); }
.no-video-notice-modal::backdrop, .cast-sword-target-notice-modal::backdrop { background: rgba(15, 23, 42, 0.36); }
.no-video-notice-modal .modal-header h3, .cast-sword-target-notice-modal .modal-header h3 { font-size: 18px; }
.no-video-notice-modal p, .cast-sword-target-notice-modal p { margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }

.modal-header h3 {
    margin: 0;
    font-size: 22px;
    overflow-wrap: anywhere;
}

.icon-button {
    min-width: 36px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
}

.form-grid {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.form-grid label {
    color: var(--muted);
    font-size: 13px;
}

.form-grid button {
    margin: 6px 0 8px;
}

.account-server-picker { min-width: 0; }
.account-server-picker .account-server-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    color: var(--text);
    background: var(--panel);
    text-align: left;
}
.account-server-trigger > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.account-server-trigger:hover, .account-server-trigger[aria-expanded="true"] { border-color: var(--primary); background: var(--panel-soft); }
.account-server-trigger:disabled { color: var(--muted); background: var(--panel-soft); }
.account-server-chevron { flex: 0 0 auto; color: var(--muted); }
.account-server-menu { margin-top: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.account-server-menu input { width: 100%; min-height: 40px; font-size: 16px; }
.account-server-options { max-height: min(240px, 30vh); overflow-y: auto; overscroll-behavior: contain; margin-top: 6px; }
.account-server-options .account-server-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 10px;
    color: var(--text);
    background: transparent;
    text-align: left;
    overflow-wrap: anywhere;
}
.account-server-option small { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.account-server-option:hover, .account-server-option:focus, .account-server-option[aria-selected="true"] { color: var(--primary); background: #eaf2ff; }
.account-server-empty { padding: 8px; }

.modal-actions {
    justify-content: flex-end;
    margin-top: 16px;
    flex-wrap: wrap;
}

.modal-actions > button { max-width: 100%; min-height: 40px; height: auto; padding: 8px 12px; white-space: normal; overflow-wrap: anywhere; }

.topup-role-name {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.topup-preview {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    border: 1px solid #dbe7f4;
    border-radius: 8px;
    padding: 12px;
    background: #f7faff;
}

.topup-preview > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.topup-preview span {
    color: var(--muted);
}

.topup-preview strong {
    text-align: right;
}

.quota-purchase-section {
    display: grid;
    gap: 8px;
}

.quota-purchase-label {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.quota-purchase-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.quota-purchase-links a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-width: 0;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 11px;
    border: 1px solid #d9e3ee;
    border-radius: 7px;
    color: var(--text);
    background: #f8fafc;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}

.quota-purchase-links a:hover,
.quota-purchase-links a:focus-visible {
    border-color: #8db9f5;
    outline: none;
    background: #eef5ff;
}

.quota-purchase-links a strong {
    font-size: 14px;
}

.quota-purchase-links a span {
    color: var(--muted);
    font-size: 12px;
}

.fortune-heading {
    align-items: center;
}

.fortune-day {
    flex: 0 0 auto;
    border: 1px solid #d8e2ee;
    border-radius: 6px;
    padding: 8px 12px;
    color: #64748b;
    background: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.fortune-content {
    width: min(760px, 100%);
    margin: 0 auto;
}

.fortune-stage {
    display: grid;
    justify-items: center;
    gap: 22px;
    min-height: 470px;
    border: 1px solid #e0d6c5;
    border-radius: 8px;
    padding: 44px clamp(18px, 5vw, 54px);
    background:
        linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
        #f2eadb;
    box-shadow: 0 18px 44px rgba(84, 65, 38, 0.10);
}

.fortune-stage.undrawn {
    align-content: center;
}

.fortune-slip-preview {
    display: grid;
    width: 96px;
    height: 180px;
    place-items: center;
    border: 1px solid #cfae78;
    border-radius: 4px;
    color: #9b2c2c;
    background: #fffaf0;
    box-shadow: 0 10px 24px rgba(91, 65, 33, 0.14);
}

.fortune-slip-preview span {
    border: 2px solid currentColor;
    padding: 8px;
    font-family: "STKaiti", "KaiTi", serif;
    font-size: 30px;
    font-weight: 800;
}

.fortune-lead {
    margin: 0;
    color: #584b3a;
    font-size: 17px;
}

.fortune-primary {
    min-width: 180px;
    min-height: 44px;
    background: #a33131;
}

.fortune-primary:hover {
    background: #842525;
}

.fortune-stage small {
    color: #7c7162;
    text-align: center;
}

.fortune-result {
    position: relative;
    display: grid;
    width: min(360px, 100%);
    min-height: 215px;
    place-items: center;
    align-content: center;
    gap: 5px;
    border: 1px solid #d7ba86;
    border-radius: 4px;
    padding: 28px 48px;
    color: #533c25;
    background: #fffaf0;
    box-shadow: 0 12px 30px rgba(91, 65, 33, 0.12);
}

.fortune-result p,
.fortune-result h2,
.fortune-result blockquote {
    margin: 0;
}

.fortune-result p {
    color: #8a7355;
    font-size: 13px;
}

.fortune-result h2 {
    font-family: "STKaiti", "KaiTi", serif;
    font-size: 48px;
    font-weight: 800;
}

.fortune-result blockquote {
    max-width: 250px;
    margin-top: 6px;
    color: #665642;
    font-family: "STKaiti", "KaiTi", serif;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    overflow-wrap: anywhere;
}

.fortune-seal {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    transform: rotate(5deg);
    border: 2px solid #b83a32;
    color: #b83a32;
    font-family: "STKaiti", "KaiTi", serif;
    font-size: 12px;
    font-weight: 800;
}

.fortune-reward {
    margin-top: 8px;
    color: #9b2c2c;
    font-size: 16px;
}

.fortune-guidance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 14px;
}

.fortune-advice {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    border-top: 1px solid #ded3c1;
    border-bottom: 1px solid #ded3c1;
    padding: 14px 10px;
}

.fortune-advice > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #28845d;
    font-weight: 800;
}

.fortune-advice.unsuitable > span {
    background: #a64343;
}

.fortune-advice ul {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fortune-advice li {
    color: #534a3e;
    overflow-wrap: anywhere;
}

.fortune-claimed,
.fortune-claim-note,
.fortune-claim-box,
.fortune-admin-draw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 18px;
    border: 1px solid #d8dfd7;
    border-radius: 6px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.76);
}

.fortune-claimed,
.fortune-claim-note,
.fortune-claim-box > div,
.fortune-admin-draw > div {
    min-width: 0;
}

.fortune-claimed span,
.fortune-claim-note span,
.fortune-claim-box span,
.fortune-admin-draw span {
    display: block;
    margin-top: 4px;
    color: #6b7280;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.fortune-claimed {
    border-color: #b7dbc7;
    color: #166534;
    background: #f0fdf4;
}

.fortune-admin-draw {
    border-color: #d8c690;
    background: #fffbeb;
}

.fortune-claim-box.multiple {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
}

.fortune-claim-box label {
    font-weight: 700;
}

.fortune-inline-error,
.fortune-message.error {
    color: var(--danger);
}

.fortune-message {
    padding: 48px 20px;
    color: var(--muted);
    text-align: center;
}

.fortune-history {
    margin-top: 22px;
    border-top: 1px solid #d8e2ee;
    padding-top: 20px;
}

.fortune-history-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.fortune-history-heading h2 {
    margin: 0;
    font-size: 18px;
}

.fortune-history-heading span {
    color: var(--muted);
    font-size: 12px;
}

.fortune-history-row {
    display: grid;
    grid-template-columns: 92px 44px minmax(0, 1fr) minmax(150px, 0.8fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    border-bottom: 1px solid #e7ecf2;
    padding: 13px 4px;
}

.fortune-history-row time {
    color: var(--muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.fortune-history-tier {
    color: #9b2c2c;
    font-family: "STKaiti", "KaiTi", serif;
    font-size: 17px;
    font-weight: 800;
}

.fortune-history-copy,
.fortune-history-role {
    min-width: 0;
}

.fortune-history-copy strong,
.fortune-history-role strong,
.fortune-history-copy small,
.fortune-history-role small {
    display: block;
    overflow-wrap: anywhere;
}

.fortune-history-copy strong,
.fortune-history-role strong {
    font-size: 13px;
}

.fortune-history-copy small,
.fortune-history-role small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.fortune-history-role.pending strong {
    color: var(--warning);
}

.fortune-history-role.disabled strong {
    color: var(--muted);
}

.fortune-history-empty {
    margin: 0;
    padding: 22px 0;
    color: var(--muted);
    text-align: center;
}

@media (min-width: 921px) {
    #dashboardView.active {
        min-height: 0;
    }

    .role-detail {
        grid-template-rows: auto auto auto minmax(0, 1fr);
        height: calc(100vh - 96px);
        min-height: 0;
    }

    .log-panel {
        display: flex;
        min-height: 0;
        flex-direction: column;
    }

    .log-layout {
        flex: 1;
        min-height: 360px;
        height: auto;
    }
}

@media (max-width: 920px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        height: auto;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid rgba(216, 226, 238, 0.85);
    }

    .role-list {
        flex: 0 1 auto;
        max-height: 240px;
    }

    .main {
        padding: 18px;
    }

    .topbar,
    .hero-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-status {
        align-items: flex-start;
    }

    .config-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .merchant-path-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .union-power-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .union-group-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tool-shell {
        grid-template-columns: 1fr;
    }

    .tool-list {
        display: flex;
        overflow-x: auto;
    }

    .tool-list-item {
        flex: 0 0 auto;
        width: auto;
    }

    .merchant-path-actions {
        justify-content: flex-start;
    }

    .merchant-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-tree-controls,
    .activity-tree-gifts {
        grid-template-columns: 1fr;
    }

    .merchant-controls button {
        width: 100%;
    }

    .config-grid {
        grid-template-columns: 1fr;
    }

    .challenge-task-controls {
        grid-template-columns: minmax(0, 1fr) minmax(130px, 1fr);
    }

    .homeland-rules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .admin-grid,
    .admin-stats {
        grid-template-columns: 1fr;
    }

    .log-layout {
        height: min(58vh, 520px);
        grid-template-columns: 1fr;
    }

    .log-tag-filter {
        overflow-x: auto;
        overflow-y: hidden;
        flex-direction: row;
        max-height: 58px;
        border-right: 0;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    }

    .log-tag {
        flex: 0 0 auto;
        text-align: center;
        white-space: nowrap;
    }

    .auto-refresh {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 520px) {
    .sidebar,
    .main {
        padding: 14px;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .homeland-rules-grid {
        grid-template-columns: 1fr;
    }

    .homeland-schedule-header {
        grid-template-columns: minmax(0, 1fr) 42px;
    }

    .homeland-schedule-time {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: space-between;
    }

    .homeland-schedule-time input {
        flex: 1 1 0;
        width: 0;
        max-width: 138px;
        padding: 0 4px;
    }

    .homeland-rule-level {
        flex-wrap: wrap;
    }

    .homeland-rule-level > span:first-child {
        flex: 1 1 120px;
    }

    .battle-preset-row {
        grid-template-columns: 1fr;
    }

    .competition-task-row {
        grid-template-columns: 1fr;
    }

    .competition-task-toggle {
        padding-right: 0;
        padding-bottom: 12px;
        border-right: 0;
        border-bottom: 1px solid #dbe5f1;
    }

    .topbar-actions {
        align-items: stretch;
        width: 100%;
        flex-direction: column;
    }

    .merchant-path-actions,
    .merchant-controls {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .merchant-path-actions button {
        width: 100%;
    }

    .union-power-toolbar,
    .union-group-options {
        grid-template-columns: 1fr;
    }

    .union-group-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-row {
        grid-template-columns: 1fr;
    }

    .admin-row-actions {
        justify-content: flex-start;
    }

    .admin-list-heading,
    .admin-list-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-list-actions,
    .admin-search {
        width: 100%;
    }

    .announcement-admin-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .topup-duration-controls {
        grid-template-columns: minmax(0, 1fr) 86px;
    }

    .topup-duration-controls button {
        grid-column: 1 / -1;
    }

    .topup-generator-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Role hub layout */
body {
    background: #f4f7fb;
}

body.drawer-open {
    overflow: hidden;
}

.auth-screen {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, rgba(29, 116, 245, 0.10), transparent 30%),
        #f4f7fb;
}

.auth-shell {
    display: grid;
    width: min(420px, 100%);
    gap: 24px;
}

.auth-shell > .brand {
    justify-content: center;
}

.auth-shell .auth-panel {
    padding: 24px;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(31, 42, 55, 0.10);
}

.app-shell {
    display: block;
    min-height: 100vh;
}

.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    padding-top: var(--safe-top);
    border-bottom: 1px solid #e4eaf2;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
}

.header-inner {
    display: flex;
    align-items: center;
    width: min(1440px, 100%);
    min-height: 68px;
    margin: 0 auto;
    padding: 0 28px;
}

.brand-button {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
    color: var(--text);
    text-align: left;
    background: transparent;
}

.brand-button:hover {
    background: transparent;
}

.brand-copy {
    display: grid;
    gap: 2px;
}

.brand-copy strong {
    font-size: 17px;
}

.brand-copy small {
    color: var(--muted);
    font-size: 11px;
}

.desktop-nav {
    display: flex;
    align-self: stretch;
    gap: 6px;
    margin-left: 48px;
}

.nav-link {
    position: relative;
    min-width: 76px;
    border-radius: 0;
    color: #536174;
    background: transparent;
    font-weight: 700;
}

.nav-link:hover {
    color: var(--primary);
    background: #f5f8fd;
}

.nav-link.active {
    color: var(--primary);
}

.nav-link.active::after {
    position: absolute;
    right: 18px;
    bottom: 0;
    left: 18px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--primary);
    content: "";
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.quota-indicator {
    display: flex;
    align-items: center;
    min-height: 36px;
    gap: 7px;
    padding: 3px 4px 3px 10px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    color: #526175;
    background: #fff;
    font-size: 12px;
    white-space: nowrap;
}

.quota-indicator strong {
    margin-left: 3px;
    color: var(--text);
    font-size: 14px;
}

.quota-redeem-button {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
}

.ticket-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ticket-toolbar input { flex: 1; min-width: 150px; }
.ticket-toolbar select { min-width: 110px; }
.ticket-counts { margin: 12px 0; }
.ticket-workspace { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.ticket-list-panel, .ticket-detail-panel { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.ticket-list-item { display: flex; flex-direction: column; width: 100%; text-align: left; gap: 7px; padding: 12px; margin-bottom: 8px; background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 10px; }
.ticket-list-item:hover, .ticket-list-item.active { border-color: var(--primary); background: rgba(29, 116, 245, 0.06); }
.ticket-list-title, .ticket-detail-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.ticket-list-title { font-weight: 600; }
.ticket-list-meta { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ticket-status { flex-shrink: 0; border-radius: 20px; padding: 3px 9px; font-size: 12px; font-weight: 500; color: #9a6700; background: #fff6d8; }
.ticket-notification { position: absolute; top: -3px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 10px; background: #ef4444; color: white; font-size: 10px; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--card-bg, white); pointer-events: none; }
.promotion-float { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(var(--viewport-bottom-offset) + var(--promotion-float-clearance, 112px) + var(--safe-bottom)); z-index: 39; filter: drop-shadow(0 5px 12px #5c62b42b); }
.promotion-float-open { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border: 1px solid #ffffffb8; border-radius: 16px; background: linear-gradient(125deg, #5975e4, #9063c7); color: #fff; font-size: 12px; font-weight: 600; }
.promotion-float-open:hover { background: linear-gradient(125deg, #4563d0, #7f4eb8); }
.promotion-float-open svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.promotion-float-toggle { position: absolute; top: -7px; right: -5px; min-height: 22px; width: 22px; padding: 0; border: 1px solid #e4e6f4; border-radius: 50%; background: #fff; color: #776393; line-height: 20px; font-size: 15px; }
.promotion-float-toggle:hover { background: #f3efff; }
.promotion-float.is-compact .promotion-float-open { padding: 10px; border-radius: 50%; }
.promotion-float.is-compact .promotion-float-open span { display: none; }
.promotion-dialog { width: min(660px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: 86dvh; padding: 0; border: 1px solid #ffffffcf; border-radius: 22px; overflow: hidden; background: #f5f6fc; box-shadow: 0 22px 70px #29375a45; }
.promotion-dialog[open] { display: flex; flex-direction: column; animation: promotion-appear .22s ease-out; }
.promotion-dialog::backdrop { background: #17254373; backdrop-filter: blur(4px); }
.promotion-hero { position: relative; flex: 0 0 auto; padding: 26px 30px 24px; overflow: hidden; color: #fff; background: radial-gradient(ellipse at 100% 0, #c3acff66, transparent 60%), linear-gradient(120deg, #4168cd, #7760b4); }
.promotion-hero::before { content: ""; position: absolute; width: 220px; height: 220px; right: -60px; top: -100px; border: 1px solid #ffffff26; border-radius: 50%; box-shadow: 0 0 0 30px #ffffff06, 0 0 0 60px #ffffff06; pointer-events: none; }
.promotion-eyebrow { display: inline-block; font-size: 11px; color: #e8e8ff; letter-spacing: 2px; }
.promotion-hero h3 { position: relative; margin: 8px 0; font-size: 29px; font-weight: 700; letter-spacing: 2px; }
.promotion-hero p { position: relative; margin: 0; font-size: 13px; color: #edf0ff; }
.promotion-hero-gift { position: absolute; width: 110px; height: 110px; right: 48px; bottom: 8px; fill: #ffffff10; stroke: #f7ddae; stroke-width: 2; stroke-linejoin: round; transform: rotate(10deg); pointer-events: none; }
.promotion-hero-gift .promotion-spark { stroke: #fff4d8; }
.promotion-close { position: absolute; right: 12px; top: 12px; width: 32px; min-height: 32px; padding: 0; border-radius: 50%; background: #ffffff20; color: #fff; font-size: 24px; line-height: 1; }
.promotion-close:hover { background: #ffffff38; }
.promotion-body { overflow: auto; overscroll-behavior: contain; padding: 18px 22px 22px; min-height: 0; scrollbar-width: thin; }
.promotion-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: #737b95; font-size: 12px; }
.promotion-toolbar button { min-height: 28px; padding: 0 10px; font-size: 12px; }
.promotion-cards { display: grid; gap: 14px; }
.promotion-card { padding: 18px; border: 1px solid #e4e8f5; border-radius: 15px; background: #fff; box-shadow: 0 3px 10px #6572b008; overflow-wrap: anywhere; }
.promotion-card-firstTopup { background: linear-gradient(120deg, #fff, #fcf8ee); border-color: #eee3cb; }
.promotion-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.promotion-tag { padding: 4px 8px; border-radius: 6px; background: #eef0ff; color: #6d60a5; font-size: 11px; font-weight: 600; }
.promotion-card-firstTopup .promotion-tag { color: #987032; background: #f7edda; }
.promotion-deadline { color: #9196a7; font-size: 11px; }
.promotion-card h4 { margin: 14px 0 8px; font-size: 17px; color: #354465; }
.campaign-card { position: relative; overflow: hidden; }
.campaign-newcomer { background: linear-gradient(135deg, #fffaf1, #fff 70%); border-color: #efe3c8; }
.campaign-newcomer .promotion-tag { color: #986125; background: #f9ebcf; }
.campaign-bundle { background: linear-gradient(140deg, #f0f4ff, #fff 70%); }
.campaign-trio { background: linear-gradient(145deg, #f9f4ff, #fff 75%); border-color: #e7dcf4; }
.campaign-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; color: #9f692e; }
.campaign-price > strong { font-size: 52px; line-height: 1.1; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.campaign-price > span { font-size: 22px; font-weight: 600; }
.campaign-price > del { color: #9299aa; font-size: 13px; }
.campaign-price > em { margin-left: auto; padding: 5px 9px; border-radius: 7px; background: #f8ebd7; font-size: 11px; font-style: normal; }
.campaign-bundle .campaign-price { color: #526cc7; }
.campaign-bundle .campaign-price > em { background: #eaf0ff; }
.campaign-cta { display: block; width: 100%; padding: 12px 14px; border: 1px solid #ffffffb0; border-radius: 11px; color: #fff; background: linear-gradient(110deg, #527bcf, #8869bb); box-shadow: 0 5px 14px #6376bc20; font-size: 13px; font-weight: 600; transition: filter .15s; }
.campaign-cta:hover { filter: brightness(1.06); }
.campaign-newcomer .campaign-cta { background: linear-gradient(105deg, #bb8648, #d2a164); }
.campaign-cta:disabled { background: #edf0f5; color: #9097aa; box-shadow: none; cursor: default; }
.campaign-rules { margin-top: 14px; padding-top: 10px; border-top: 1px solid #e8eaf3; }
.campaign-rules summary { color: #8790a4; font-size: 11px; cursor: pointer; }
.campaign-rules p { margin-bottom: 0; }
.campaign-benefits { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.campaign-benefits > div { display: flex; flex: 1; flex-direction: column; gap: 9px; min-width: 0; padding: 14px; border: 1px solid #e2e8f6; border-radius: 12px; background: #ffffffa8; }
.campaign-benefits span { font-size: 12px; color: #7d88a0; }
.campaign-benefits strong { font-size: 28px; color: #526bc0; }
.campaign-benefits small { margin-left: 6px; font-size: 11px; font-weight: 400; }
.campaign-benefits > b { color: #9caacc; font-size: 20px; }
.campaign-purchase { display: flex; flex-wrap: wrap; gap: 10px; }
.campaign-purchase select { flex: 1 1 150px; min-width: 0; width: 100%; border-radius: 10px; }
.campaign-purchase .campaign-cta { flex: 1 1 150px; }
.campaign-friends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.campaign-friend { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 15px 5px; border: 1px dashed #ded5ec; border-radius: 12px; color: #8a809b; background: #fcfaff; font-size: 11px; }
.campaign-friend.is-host { border-style: solid; background: #f1ebfb; }
.campaign-friend.is-ready { border-style: solid; border-color: #cfc0e7; }
.campaign-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #a393bf; background: #ece7f4; font-size: 15px; font-weight: 600; }
.is-ready .campaign-avatar { color: #fff; background: linear-gradient(135deg, #758acb, #a585c5); }
.campaign-friend strong { color: #7961ad; font-size: 24px; letter-spacing: -1px; }
.campaign-friend small { display: inline; margin-left: 3px; font-size: 10px; font-weight: 400; letter-spacing: 0; }
.campaign-friend em { text-align: center; font-style: normal; font-size: 10px; color: #9990a5; }
.campaign-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.campaign-stats > div { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: #f4f6fd; color: #6377af; }
.campaign-stats strong { font-size: 22px; }
.campaign-stats small, .campaign-stats span { color: #8994ad; font-size: 12px; }
.campaign-adjust { display: grid; gap: 12px; }
.campaign-adjust label { display: grid; gap: 8px; }
.campaign-adjust .campaign-check { display: flex; align-items: flex-start; font-size: 12px; }
.campaign-check input { width: auto; flex: 0 0 auto; }
.promotion-card p { margin: 8px 0 12px; color: #7a8193; font-size: 12px; line-height: 1.8; }
.promotion-highlight { display: flex; align-items: baseline; gap: 12px; color: #a97d3c; font-size: 12px; }
.promotion-highlight > strong { font-size: 44px; line-height: 1.3; font-weight: 700; }
.promotion-highlight > strong span { margin-left: 4px; font-size: 19px; }
.promotion-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.promotion-offer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 13px 8px; min-width: 0; border: 1px solid #dfe5fb; border-radius: 10px; background: #f5f7ff; color: #5d68a6; font-size: 11px; }
.promotion-offer:hover { background: #edf0ff; border-color: #a5b3e6; }
.promotion-offer > strong { color: #586cbe; font-size: 19px; line-height: 1.2; }
.promotion-offer small { margin-right: 2px; font-size: 12px; }
.promotion-offer:disabled { opacity: .65; color: #858a9c; background: #f5f6f9; border-color: #e6e8ef; }
.promotion-progress-label { display: flex; justify-content: space-between; margin: 12px 0 8px; color: #7a8193; font-size: 11px; }
.promotion-progress-label strong { color: #7961b6; }
.promotion-progress { display: block; width: 100%; height: 5px; margin-bottom: 16px; border: 0; border-radius: 5px; overflow: hidden; background: #edeef6; accent-color: #8270c9; }
.promotion-progress::-webkit-progress-bar { background: #edeef6; }
.promotion-progress::-webkit-progress-value { background: linear-gradient(90deg, #6285dd, #ad81c9); border-radius: 5px; }
.promotion-progress::-moz-progress-bar { background: #8270c9; }
.promotion-records { margin-top: 16px; padding: 0 16px; border: 1px solid #e4e8f5; border-radius: 15px; background: #fff; color: #657089; font-size: 12px; }
.promotion-records summary { cursor: pointer; font-weight: 600; }
.promotion-records input { flex: 1 1 140px; min-width: 0; width: 100%; }
.promotion-records button { font-size: 12px; }
.promotion-reward { flex-wrap: wrap; gap: 8px; }
.promotion-reward > .admin-row-actions { flex-basis: 100%; }
.promotion-empty { padding: 26px 12px; color: #7a8193; text-align: center; font-size: 13px; }
.promotion-empty strong { color: #69789d; }
.promotion-empty p { margin: 10px 0 0; font-size: 12px; line-height: 1.8; }
.promotion-loading { display: inline-block; width: 20px; height: 20px; border: 2px solid #dfe4f2; border-top-color: #8270c9; border-radius: 50%; animation: promotion-spin .8s linear infinite; }
@keyframes promotion-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes promotion-spin { to { transform: rotate(360deg); } }
.promotion-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.promotion-form label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.promotion-form input, .promotion-form select { width: 100%; min-width: 0; }
.promotion-form .promotion-wide { grid-column: 1 / -1; }
.promotion-tiers { display: flex; flex-direction: column; gap: 8px; }
.promotion-tier { display: flex; gap: 8px; align-items: center; }
.promotion-tier input { min-width: 0; width: 100%; }
.promotion-tier label { flex: 1; }
.promotion-item { padding: 14px 0; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.promotion-item:last-child { border-bottom: 0; }
.promotion-item .admin-row-actions { flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ticket-status-processing { color: #2563eb; background: #eff6ff; }
@media (max-width: 560px) {
    .campaign-price > strong { font-size: 44px; }
    .campaign-friends { gap: 6px; }
    .campaign-friend { padding: 12px 3px; }
    .campaign-friend strong { font-size: 22px; }
    .campaign-benefits { gap: 6px; }
    .campaign-benefits > div { padding: 12px 8px; }
    .promotion-form { grid-template-columns: 1fr; }
    .promotion-tier { flex-wrap: wrap; }
    .promotion-tier label { flex-basis: 35%; }
    .promotion-float { right: 12px; }
    .promotion-float-open { padding: 10px; font-size: 11px; }
    .promotion-dialog { border-radius: 18px; max-height: 88dvh; }
    .promotion-hero { padding: 22px 20px; }
    .promotion-hero h3 { font-size: 26px; }
    .promotion-hero-gift { width: 82px; height: 82px; right: 22px; opacity: .8; }
    .promotion-body { padding: 14px 12px; }
    .promotion-card { padding: 14px; }
    .promotion-offers { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
    .promotion-offer > strong { font-size: 17px; }
    .promotion-records { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .promotion-dialog[open], .promotion-loading { animation: none; } }
.ticket-status-resolved { color: #15803d; background: #f0fdf4; }
.ticket-empty { color: var(--muted); text-align: center; padding: 24px 8px; }
.ticket-pagination, .ticket-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ticket-pagination { font-size: 12px; margin-top: 12px; }
.ticket-pagination button { padding: 6px 10px; }
.ticket-compose { display: grid; gap: 12px; }
.ticket-compose label { display: grid; gap: 6px; }
.ticket-compose textarea { resize: vertical; width: 100%; min-height: 90px; }
.ticket-thread { display: grid; gap: 10px; margin: 16px 0; max-height: 55vh; overflow-y: auto; }
.ticket-message { padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.ticket-message.from-admin { background: rgba(99, 102, 241, 0.04); border-color: rgba(99, 102, 241, 0.25); }
.ticket-message-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--muted); }
.ticket-message p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; margin: 8px 0 0; }
.ticket-filter .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 720px) {
    .ticket-workspace { grid-template-columns: 1fr; }
    .ticket-list-panel { max-height: 38vh; overflow-y: auto; }
    .ticket-toolbar input { order: 1; flex-basis: 100%; }
    .ticket-list-panel, .ticket-detail-panel { padding: 10px; }
}

.user-menu-wrap {
    position: relative;
}

.user-trigger {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 8px;
    padding: 4px 8px 4px 5px;
    color: var(--text);
    background: transparent;
}

.user-trigger:hover {
    background: #f1f5fa;
}

.user-avatar {
    position: relative;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #1d74f5, #4b93fa);
    font-weight: 800;
}

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

.chevron {
    color: var(--muted);
}

.user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 210px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

.user-menu-profile {
    display: grid;
    gap: 4px;
    padding: 15px 16px;
    border-bottom: 1px solid #edf1f6;
}

.user-menu-profile small {
    color: var(--muted);
}

.user-menu-item {
    width: 100%;
    min-height: 42px;
    border-radius: 0;
    padding: 0 16px;
    color: var(--text);
    text-align: left;
    background: #fff;
}

.user-menu-item:hover {
    background: #f5f8fd;
}

.danger-text {
    color: var(--danger);
}

.header-icon,
.mobile-menu-button,
.mobile-drawer,
.drawer-backdrop {
    display: none;
}

.main {
    display: block;
    width: min(1440px, 100%);
    min-width: 0;
    margin: 0 auto;
    padding: 30px 28px 48px;
}

.page-heading,
.detail-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.detail-heading {
    align-items: center;
    justify-content: flex-start;
}

.page-heading h1,
.detail-heading h1 {
    margin: 0;
    font-size: 26px;
}

.page-description {
    margin: 6px 0 0;
    color: var(--muted);
}

.page-actions {
    display: flex;
    gap: 10px;
}

.back-button {
    min-height: 42px;
}

.roles-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 20px;
}

.role-search {
    display: grid;
    flex: 1 1 280px;
    min-width: 0;
    gap: 6px;
}

.role-search > span,
.role-batch-hint {
    color: var(--muted);
    font-size: 13px;
}

.role-search input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
}

.role-batch-actions {
    display: flex;
    gap: 10px;
}

.role-batch-hint {
    flex-basis: 100%;
    margin: 0;
}

.role-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.role-card {
    display: grid;
    min-width: 0;
    gap: 10px;
    margin: 0;
    padding: 14px;
    border: 1px solid #e0e7f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(31, 42, 55, 0.06);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.role-card:hover,
.role-card:focus-visible {
    border-color: #a9c9f8;
    outline: none;
    background: #fff;
    box-shadow: 0 12px 30px rgba(29, 116, 245, 0.12);
    transform: translateY(-2px);
}

.role-card.busy {
    border-color: #a9c9f8;
}

.onboarding-demo-card {
    border-style: dashed;
    border-color: #9bb7d7;
    background: #f9fbfe;
    cursor: default;
}

.onboarding-demo-card:hover {
    border-color: #9bb7d7;
    background: #f9fbfe;
    box-shadow: 0 7px 22px rgba(31, 42, 55, 0.06);
    transform: none;
}

.onboarding-demo-card button:disabled {
    cursor: default;
    opacity: 1;
}

.onboarding-demo-label {
    margin-left: 5px;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
}

.role-card-heading,
.role-card-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.role-card-heading {
    justify-content: space-between;
}

.role-card-title {
    min-width: 0;
}

.role-card-title > div {
    min-width: 0;
}

.role-card-avatar {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    color: var(--primary);
    background: #eaf2ff;
    font-size: 16px;
    font-weight: 800;
}

.role-card h2,
.role-card p {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-card h2 {
    font-size: 15px;
}

.role-card p,
.role-card-meta {
    color: var(--muted);
    font-size: 11px;
}

.role-card-heading-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.role-topup-button {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 6px;
    font-size: 19px;
    line-height: 1;
}

.role-card-meta {
    display: flex;
    min-height: 16px;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.role-card-identity {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: #718096;
    font-size: 10px;
}

.role-card-identity span {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.expired-text {
    color: var(--danger);
}

.role-card-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.role-card-stats > div {
    min-width: 0;
    border-radius: 6px;
    padding: 7px 8px;
    background: #f7f9fc;
}

.role-card-stats span,
.role-card-stats strong {
    display: block;
}

.role-card-stats span {
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 9px;
}

.role-card-stats strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.role-card-controls {
    display: grid;
    gap: 7px;
    padding-top: 10px;
    border-top: 1px solid #edf1f6;
    cursor: default;
}

.role-runtime-actions,
.role-page-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.role-page-actions.has-share {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#configShareCode {
    width: 100%;
    overflow-wrap: anywhere;
}

#roleShareCurrent {
    margin: 14px 0 0;
}

.role-card-controls button {
    min-width: 0;
    min-height: 34px;
    padding: 0 8px;
}

.role-card-controls .page-entry {
    color: #fff;
    background: var(--primary);
}

.role-card-controls .page-entry:hover {
    background: var(--primary-dark);
}

.danger-soft {
    color: #b42318;
    background: #fff0ee;
}

.danger-soft:hover {
    background: #ffe1dd;
}

.empty-state {
    border: 1px dashed #cbd7e6;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
}

.empty-state p {
    margin-bottom: 18px;
}

.empty-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    place-items: center;
    border-radius: 50%;
    color: var(--primary);
    background: #eaf2ff;
    font-size: 20px;
    font-weight: 800;
}

.role-detail {
    max-width: none;
}

@media (min-width: 921px) {
    .role-detail {
        grid-template-rows: auto minmax(0, 1fr);
        height: calc(100vh - 160px);
        min-height: 520px;
    }
}

.config-detail,
.tools-view,
.admin-detail {
    max-width: none;
}

@media (max-width: 1100px) {
    .role-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .merchant-mobile-prices {
        display: block;
    }

    .merchant-price-matrix {
        display: none;
    }

    .merchant-import-role {
        width: 100%;
        max-width: none;
    }
    button {
        min-height: 44px;
    }

    .header-inner {
        min-height: 60px;
        padding: 0 14px;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .header-inner .brand-copy,
    .header-actions > .connection,
    .user-name,
    .chevron {
        display: none;
    }

    .header-inner > .brand {
        margin-right: 6px;
    }

    .header-inner .brand-mark {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }

    .header-icon,
    .mobile-menu-button {
        display: flex;
    }

    .header-inner .mobile-menu-button {
        display: none;
    }

    .desktop-nav {
        gap: 6px;
        margin-left: 0;
    }

    .nav-link,
    .desktop-nav #toolsBtn {
        min-width: 48px;
        min-height: 60px;
        padding: 0 10px;
        font-size: 15px;
    }

    .nav-link.active::after {
        right: 8px;
        left: 8px;
    }

    .header-actions {
        gap: 6px;
    }

    .mobile-menu-button {
        width: 36px;
        min-height: 42px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0;
        color: var(--text);
        background: #f1f5fa;
    }

    .mobile-menu-button span {
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }

    .user-trigger {
        min-height: 42px;
        padding: 4px;
    }

    .user-avatar {
        width: 34px;
        height: 34px;
    }

    .drawer-backdrop {
        position: fixed;
        z-index: 150;
        inset: 0;
        display: block;
        background: rgba(15, 23, 42, .38);
    }

    .mobile-drawer {
        position: fixed;
        z-index: 160;
        top: var(--viewport-top);
        right: 0;
        display: grid;
        width: min(310px, 86vw);
        height: var(--viewport-height);
        overflow-y: auto;
        align-content: start;
        gap: 8px;
        padding: 18px;
        background: #fff;
        box-shadow: -16px 0 42px rgba(15, 23, 42, .18);
        transform: translateX(105%);
        transition: transform .2s ease;
    }

    .mobile-drawer.open {
        transform: translateX(0);
    }

    .drawer-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #edf1f6;
    }

    .drawer-link {
        width: 100%;
        justify-content: flex-start;
        color: var(--text);
        text-align: left;
        background: #f5f8fc;
    }

    .drawer-link.active {
        color: var(--primary);
        background: #eaf2ff;
    }

    .main {
        padding: 22px 14px 36px;
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 18px;
    }

    .page-heading h1,
    .detail-heading h1 {
        font-size: 22px;
    }

    .page-actions {
        width: 100%;
    }

    .page-actions button {
        flex: 1 1 0;
    }

    .detail-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .role-list {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .role-search,
    .role-batch-actions {
        flex-basis: 100%;
    }

    .role-batch-actions button {
        flex: 1 1 0;
        min-height: 44px;
    }

    .role-card {
        gap: 10px;
        padding: 13px;
    }

    .role-card:hover {
        transform: none;
    }

    .role-card-controls button {
        min-height: 44px;
    }

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

    .action-panel > button {
        flex: 1 1 calc(50% - 10px);
    }

    .config-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .config-actions > button {
        min-width: 0;
        padding-inline: 8px;
    }

    .config-expand-control {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .config-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .config-category-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
    }

    .config-search {
        flex-basis: auto;
        width: 100%;
        min-width: 0;
    }

    .config-category-tab {
        flex: 0 0 auto;
    }

    .config-section-toggle {
        min-height: 52px;
        padding: 12px 14px;
    }

    .fortune-stage {
        min-height: 430px;
        gap: 18px;
        padding: 28px 16px;
    }

    .fortune-guidance {
        grid-template-columns: 1fr;
    }

    .fortune-claimed,
    .fortune-claim-note,
    .fortune-claim-box,
    .fortune-claim-box.multiple,
    .fortune-admin-draw {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .fortune-claim-box button,
    .fortune-claim-box select {
        width: 100%;
    }

    .fortune-history-row {
        grid-template-columns: 1fr auto;
        gap: 7px 12px;
        padding: 14px 2px;
    }

    .fortune-history-row time {
        grid-column: 1;
    }

    .fortune-history-tier {
        grid-column: 2;
        grid-row: 1;
    }

    .fortune-history-copy,
    .fortune-history-role {
        grid-column: 1 / -1;
    }

    .site-banners {
        top: 70px;
        max-height: calc(100vh - 84px);
        max-height: calc(100dvh - 84px);
    }

    .featured-notice-banner .announcement-heading .icon-button {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        min-height: 32px;
    }
}

.profile-content {
    display: grid;
    gap: 16px;
}

.community-card { display: block; padding: 0; min-height: 0; overflow: hidden; border: 1px solid #d6e5f7; border-radius: 14px; background: #f3f8ff; box-shadow: 0 3px 14px #305f9a0c; cursor: pointer; }
.community-card:hover { border-color: #9abde9; background: #eaf3ff; }
.community-card:focus-visible { outline: 3px solid #a3c3eb; outline-offset: 3px; }
.community-card img { display: block; width: 100%; height: auto; border-radius: inherit; }
.community-card-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px 0; color: #416389; text-align: left; }
.community-card-heading strong { color: #285b9e; font-size: 18px; font-weight: 700; }
.community-card-heading > span { font-size: 12px; }
.profile-community { width: min(440px, 100%); margin: 0 0 18px; }
.qq-community-dialog { width: min(480px, calc(100vw - 24px)); }
.qq-community-dialog .community-card { width: 100%; }
.qq-community-dialog .modal-header h3 { font-size: 18px; }
.qq-community-dialog .hint { margin: 12px 0 0; text-align: center; }

.profile-summary-grid,
.profile-record-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.first-topup-promotion {
    padding: 12px 16px;
    border: 1px solid #f0d297;
    border-radius: 8px;
    background: linear-gradient(110deg, #fff8df, #fff1df);
    color: #8a4a11;
    font-weight: 600;
    line-height: 1.6;
}

.first-topup-badge {
    color: #a45a12;
    font-weight: 600;
}

.agent-admin-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.agent-admin-controls label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.agent-admin-controls input[type="number"] {
    width: 110px;
}

.agent-code-detail summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 12px;
}

.agent-code-detail code {
    display: block;
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.agent-money-table {
    overflow-x: auto;
}

.agent-money-table table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
    font-size: 13px;
}

.agent-money-table th,
.agent-money-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

@media (max-width: 640px) {
    .agent-admin-row { flex-direction: column; align-items: stretch; }
    .agent-admin-controls { justify-content: flex-start; }
}

.profile-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid #dce5ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(31, 42, 55, 0.05);
}

.profile-panel-wide {
    grid-column: 1 / -1;
}

.profile-summary-grid .profile-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 16px;
}

.profile-summary-grid .profile-panel > span,
.profile-summary-grid .profile-panel > strong,
.profile-summary-grid .profile-panel > small {
    grid-column: 1;
}

.profile-summary-grid .profile-panel > strong {
    color: #172033;
    font-size: 30px;
    line-height: 1.15;
}

.profile-summary-grid .profile-panel > small,
.profile-summary-grid .profile-panel > span {
    color: var(--muted);
}

.profile-summary-grid .profile-panel > button {
    grid-column: 2;
    grid-row: 1 / span 3;
}

.rebate-panel {
    border-color: #eadcb6;
    background: #fffdf7;
}

.invite-panel {
    display: grid;
    gap: 14px;
}

.invite-field {
    display: grid;
    gap: 6px;
}

.invite-field label {
    color: var(--muted);
    font-size: 12px;
}

.invite-field > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.invite-field code {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #243248;
    background: #f7f9fc;
    overflow-wrap: anywhere;
}

.profile-history {
    display: grid;
}

.profile-role-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #edf1f6;
}

.profile-role-row:last-child {
    border-bottom: 0;
}

.profile-role-row > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.profile-role-row strong,
.profile-role-row span {
    overflow-wrap: anywhere;
}

.profile-role-row span {
    color: var(--muted);
    font-size: 12px;
}

.profile-role-row button {
    flex: 0 0 auto;
}

.profile-history-row {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #edf1f6;
}

.profile-history-row:last-child {
    border-bottom: 0;
}

.profile-history-row > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.profile-history-row span {
    color: var(--muted);
    font-size: 12px;
}

.record-status {
    flex: 0 0 auto;
    text-align: right;
}

.success-text {
    color: #12805c !important;
}

@media (max-width: 760px) {
    .quota-purchase-links {
        grid-template-columns: 1fr;
    }

    .profile-summary-grid,
    .profile-record-grid {
        grid-template-columns: 1fr;
    }

    .profile-panel-wide {
        grid-column: auto;
    }

    .quota-indicator {
        gap: 4px;
        padding-left: 7px;
    }

    .quota-indicator > span {
        font-size: 12px;
    }

    .quota-indicator strong {
        margin-left: 2px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .header-actions {
        gap: 4px;
    }

    .nav-link,
    .desktop-nav #toolsBtn {
        min-width: 42px;
        padding-inline: 7px;
        font-size: 14px;
    }

    .mobile-menu-button {
        width: 32px;
    }

    .user-trigger {
        padding: 2px;
    }

    .user-avatar {
        width: 28px;
        height: 28px;
    }

    .quota-indicator > span {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        max-width: 54px;
        line-height: 15px;
    }

    .quota-indicator strong {
        font-size: 11px;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .quota-indicator {
        gap: 3px;
        padding-left: 5px;
    }

    .quota-redeem-button {
        width: 24px;
        min-width: 24px;
    }
}

@media (max-width: 390px) {
    .profile-summary-grid .profile-panel {
        grid-template-columns: 1fr;
    }

    .profile-summary-grid .profile-panel > button {
        grid-column: 1;
        grid-row: auto;
        margin-top: 8px;
    }

    .profile-history-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .profile-role-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .record-status {
        text-align: left;
    }
    .brand-copy strong {
        font-size: 15px;
    }

    .role-card-heading {
        align-items: flex-start;
    }

    .role-runtime-actions {
        grid-template-columns: 1fr 1fr;
    }

    .role-runtime-actions button:last-child {
        grid-column: 1 / -1;
    }

    .log-layout {
        height: min(62vh, 520px);
    }

}

/* Role hall and configuration: readable cards and compact supporting controls. */
#rolesView, #configView { --surface-line: #e3eaf3; --soft-blue: #f0f5fc; }
#configView { max-width: 1120px; margin-inline: auto; }
#rolesView { padding-bottom: calc(112px + var(--safe-bottom)); }
#rolesView .role-search { gap: 8px; }
#rolesView .role-search input { border-radius: 7px; background: #f8fafc; min-height: 38px; }
#rolesView .role-batch-actions { gap: 8px; }
#rolesView .role-batch-actions button { flex: 1; min-height: 36px; border-radius: 7px; }
.role-hall-dock { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(var(--viewport-bottom-offset) + 12px + var(--safe-bottom)); z-index: 40; display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; max-width: calc(100vw - 24px); padding: 5px; border: 1px solid #dce5ef; border-radius: 15px; background: #fffffff5; box-shadow: 0 4px 20px #304d6d20; }
.role-hall-dock > * { flex: 0 0 48px; min-width: 0; }
.role-hall-dock > .hall-dock-controls { display: flex; align-items: center; gap: inherit; flex: 0 1 auto; }
#roleHallDock { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: min(250px, calc(100vw - 24px)); }
#roleHallDock .hall-dock-community { grid-column: 1 / -1; width: 100%; min-height: 26px; padding: 4px 8px; border: 0; border-radius: 7px; background: #edf4ff; color: #416b9e; font-size: 12px; line-height: 1.4; box-shadow: none; }
#roleHallDock .hall-dock-community:hover { background: #e3efff; color: #285b9e; }
#roleHallDock.is-collapsed .hall-dock-community { display: none; }
#roleHallDock.is-collapsed { width: auto; grid-template-columns: auto; }
.hall-dock-controls > * { flex: 0 0 48px; min-width: 0; }
.role-hall-dock .hall-dock-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 48px; height: 46px; min-height: 46px; padding: 4px; border: 0; border-radius: 10px; color: #536a88; background: transparent; font-size: 10px; line-height: 1.2; white-space: nowrap; cursor: pointer; appearance: none; -webkit-appearance: none; }
.role-hall-dock svg { display: block; flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.role-hall-dock :is(.hall-dock-action:hover, .hall-dock-action[aria-expanded="true"]:not(.hall-dock-collapse), .has-query) { background: #edf4ff; color: #2567b8; }
.role-hall-dock .hall-dock-collapse { flex: 0 0 32px; width: 32px; }
.role-hall-dock.is-collapsed { padding: 3px; border-radius: 12px; }
.role-hall-dock.is-collapsed .hall-dock-collapse { flex-basis: 40px; width: 40px; height: 40px; min-height: 40px; }
.role-hall-dock.is-collapsed .hall-dock-collapse svg { transform: rotate(180deg); }
.role-hall-dock button:focus-visible { outline: 3px solid #a3c3eb; outline-offset: 2px; }
.role-hall-dock #addAccountBtn { color: #2567b8; }
.hall-dock-panel { position: absolute; right: 0; bottom: calc(100% + 8px); width: min(310px, calc(100vw - 24px)); padding: 14px; display: grid; gap: 10px; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; box-shadow: 0 6px 24px #304d6d26; }
.hall-dock-panel .hint { margin: 0; font-size: 12px; line-height: 1.6; }
.hall-dock-panel button { font-size: 12px; }
.hall-dock-panel > button { justify-self: start; }
#rolesView .role-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; gap: 14px; }
#rolesView .role-card { position: relative; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 10px 12px; border: 1px solid var(--surface-line); border-radius: 10px; box-shadow: 0 2px 10px #19385c05; background: #fff; }
#rolesView .role-card.is-running { border-top: 2px solid #72bda3; padding-top: 9px; }
#rolesView .role-card.is-crashed { border-top: 2px solid #dfa778; padding-top: 9px; }
#rolesView .role-card:hover { border-color: #afc8e9; box-shadow: 0 8px 24px #294d7d0c; }
#rolesView .role-card:focus-visible { outline: 3px solid #91b9f2; outline-offset: 3px; }
#rolesView .role-card.union-power-advanced {
    border-color: #d9b45d;
    background: linear-gradient(110deg, #fff2c9, #fffaf0 85%);
    box-shadow: 0 4px 16px #a9751520;
}
#rolesView .role-card.union-power-advanced:hover { border-color: #c99835; box-shadow: 0 6px 20px #a9751530; }
#rolesView .role-card.union-power-advanced::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 1px #e7c777, 0 3px 16px #dcae4b35;
    opacity: .3;
    animation: management-card-glow 4s ease-in-out infinite;
}
#rolesView .union-power-advanced .management-badge { display: inline-flex; align-items: center; gap: 4px; color: #78510b; background: #f9e7ac; font-weight: 500; }
#rolesView .union-power-advanced .management-badge::before { content: "✦"; color: #af7915; }
@keyframes management-card-glow { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) {
    #rolesView .role-card.union-power-advanced::before { animation: none; opacity: .4; }
}
#rolesView .role-card h2 { font-size: 14px; font-weight: 600; line-height: 1.4; }
#rolesView .role-card-title p { font-size: 11px; margin-top: 2px; }
#rolesView .role-card-title { flex: 1; }
#rolesView .role-card .status-pill { font-size: 11px; padding: 4px 8px; white-space: nowrap; }
#rolesView .role-card-heading-actions { gap: 5px; }
#rolesView .role-topup-button { min-height: 30px; width: 30px; height: 30px; border-radius: 7px; }
#rolesView .role-card-meta { min-height: 0; font-size: 11px; gap: 4px 8px; }
#rolesView .role-card-meta span { white-space: normal; line-height: 1.5; }
#rolesView .role-card-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px 0; border: 0; background: transparent; }
#rolesView .role-card-stats > div { display: grid; align-content: start; gap: 2px; padding: 0; border-radius: 0; background: transparent; }
#rolesView .role-card-stats span { margin: 0; font-size: 11px; color: #708098; }
#rolesView .role-card-stats strong { font-size: 12px; font-weight: 600; color: #273e5b; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; }
#rolesView .role-extra { min-width: 0; cursor: default; }
#rolesView .role-extra summary { display: flex; justify-content: space-between; align-items: center; min-height: 24px; color: #71839a; font-size: 11px; cursor: pointer; list-style: none; }
#rolesView .role-extra summary::-webkit-details-marker { display: none; }
#rolesView .role-extra summary > span { transition: transform .15s; }
#rolesView .role-extra[open] summary > span { transform: rotate(180deg); }
#rolesView .role-extra-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 0; }
#rolesView .role-extra-stats > div { display: flex; justify-content: space-between; gap: 6px; min-width: 0; color: #6c7c92; font-size: 11px; }
#rolesView .role-extra-stats strong { font-weight: 600; }
#rolesView .role-extra-stats :is(span, strong) { min-width: 0; overflow-wrap: anywhere; }
#rolesView .role-card-identity { padding-top: 6px; font-size: 11px; }
#rolesView .role-card-identity > div { display: flex; gap: 6px; }
#rolesView .role-card-controls { gap: 6px; padding-top: 6px; }
#rolesView .role-runtime-actions, #rolesView .role-page-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#rolesView .role-runtime-actions button:last-child { grid-column: auto; }
#rolesView .role-card-controls button { min-height: 30px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
#rolesView .role-main-actions { display: flex; align-items: center; gap: 6px; }
#rolesView .role-main-actions > button { flex: 0 0 auto; }
#rolesView .role-main-actions > button.ghost { color: #64748b; background: transparent; }
#rolesView .role-main-actions .page-entry { color: #245da8; background: #f0f5fc; }
#rolesView .role-main-actions > .role-actions-menu { margin-left: auto; }
#rolesView .role-actions-menu { position: relative; }
#rolesView .role-actions-menu > summary { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: transparent; color: #60748f; font-size: 18px; line-height: 1; cursor: pointer; list-style: none; }
#rolesView .role-actions-menu > summary::-webkit-details-marker { display: none; }
#rolesView .role-actions-popover { position: absolute; top: calc(100% + 5px); right: 0; z-index: 5; display: grid; gap: 4px; min-width: 120px; padding: 5px; background: #fff; border: 1px solid #dce5f2; border-radius: 9px; box-shadow: 0 8px 24px #243e6420; }
#rolesView .role-card:has(.role-actions-menu[open]) { z-index: 2; }
#rolesView .role-page-actions:not(.has-share) { grid-template-columns: 1fr 1fr; }
#rolesView .role-page-actions .page-entry { background: #eaf2ff; color: #245da8; }
#rolesView .role-page-actions .page-entry:hover { background: #dceafd; }
#rolesView #rolePagination { font-size: 12px; color: #718096; gap: 8px; }
#rolesView .role-list-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; margin-top: 14px; }
#rolesView .role-list-footer .hint { margin: 0; font-size: 12px; }
#rolesView .role-list-footer #rolePagination { margin: 0; justify-content: center; }
#rolesView .role-list-footer button { min-height: 30px; font-size: 12px; }
#dashboardView { padding-bottom: 0; }
.log-view-tabs { display: flex; padding: 3px; gap: 3px; border-radius: 8px; background: #eef3fa; }
.log-view-tabs button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 6px; font-size: 12px; background: transparent; color: #60748e; box-shadow: none; }
.log-view-tabs button[aria-pressed="true"] { color: #245da8; background: #fff; box-shadow: 0 1px 4px #28436814; }
.log-search-bar { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 12px; border-bottom: 1px solid #e3eaf4; background: #f8fafd; }
.log-search-field { display: flex; align-items: center; flex: 1; min-width: 0; max-width: 460px; border: 1px solid #dce5ef; border-radius: 7px; background: #fff; }
.log-search-field:focus-within { border-color: #89afe0; box-shadow: 0 0 0 2px #dceafb; }
.log-search-field input { flex: 1; min-width: 0; width: 100%; height: 30px; min-height: 30px; padding: 4px 9px; border: 0; border-radius: 7px; background: transparent; color: #334b69; font-size: 13px; }
.log-search-field input:focus { outline: none; box-shadow: none; }
.log-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.log-search-field button { flex: 0 0 30px; width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 6px; color: #6f8198; font-size: 20px; background: transparent; box-shadow: none; }
.log-search-count { flex-shrink: 0; color: #71839a; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.runtime-panel { padding: 8px; color: #304966; }
.runtime-panel-heading { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-size: 15px; font-weight: 600; }
.runtime-panel-heading small, .runtime-card-note, .runtime-panel-note { color: #73829a; font-size: 12px; font-weight: 400; line-height: 1.7; }
.runtime-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-items: start; }
.runtime-card { min-width: 0; padding: 0; border: 1px solid #e3eaf4; border-radius: 9px; background: #fff; }
.runtime-card[hidden] { display: none; }
.runtime-card[open] { grid-column: 1 / -1; }
.runtime-card > summary { display: grid; grid-template-columns: minmax(80px, .7fr) minmax(0, 1fr) auto 12px; align-items: center; gap: 8px; padding: 9px 10px; cursor: pointer; list-style: none; }
.runtime-card > summary::-webkit-details-marker { display: none; }
.runtime-card > summary:focus-visible { outline: 2px solid #78a8e8; outline-offset: -2px; border-radius: 9px; }
.runtime-card-title { color: #274a75; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.runtime-summary-metrics { display: flex; flex-wrap: wrap; gap: 3px 10px; color: #7a8a9f; font-size: 10px; }
.runtime-summary-metrics b { color: #385e8a; font-size: 11px; font-weight: 500; }
.runtime-status { font-size: 10px; color: #6b8ba7; max-width: 95px; overflow-wrap: anywhere; }
.runtime-chevron { color: #8aa2bf; transition: transform .15s; }
.runtime-card[open] .runtime-chevron { transform: rotate(180deg); }
.runtime-card-body { padding: 10px; border-top: 1px solid #edf1f7; }
.runtime-card:not([open]) .runtime-card-body { display: none; }
.runtime-card-wide { grid-column: 1 / -1; }
.runtime-card h2 { margin: 0 0 12px; font-size: 15px; color: #274a75; }
.runtime-card h3 { margin: 10px 0 5px; font-size: 12px; font-weight: 600; }
.runtime-card h4 { margin: 0 0 8px; font-size: 12px; }
.runtime-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; margin-bottom: 8px; }
.runtime-card-wide > .runtime-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.runtime-metric { display: grid; align-content: start; gap: 4px; min-width: 0; }
.runtime-metric > span, .runtime-metric small { color: #76879b; font-size: 11px; overflow-wrap: anywhere; }
.runtime-metric strong { color: #2d5688; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.runtime-empty { margin: 6px 0; padding: 7px 9px; border-radius: 6px; background: #f7f9fc; color: #7a8a9f; line-height: 1.6; font-size: 11px; }
.runtime-table-wrap { overflow-x: auto; }
.runtime-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.runtime-table th, .runtime-table td { padding: 5px 6px; border-bottom: 1px solid #edf1f7; text-align: right; }
.runtime-table :is(th, td):first-child { text-align: left; }
.runtime-table th { font-size: 11px; color: #7a8a9f; font-weight: 500; }
.runtime-table td small { display: block; margin-top: 3px; color: #8d9aae; font-size: 10px; }
.runtime-task-list > div { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0; font-size: 12px; }
.runtime-task-list > div > :last-child { flex-shrink: 0; color: #7a8a9f; }
.runtime-equipment-body { margin: 8px 0; }
.runtime-equipment-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; max-width: 600px; }
.runtime-equipment-slot { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 5px; border: 1px solid #dce7f5; border-radius: 6px; background: #f7faff; color: #476689; }
.runtime-equipment-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1px 4px; font-size: 10px; }
.runtime-equipment-top small { color: #9c783d; font-size: 10px; }
.runtime-equipment-slot strong { font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
.runtime-equipment-slot.is-empty { border-style: dashed; background: #fafbfd; color: #95a1b1; }
.runtime-equipment-attributes { display: grid; gap: 1px; margin: 0; font-size: 10px; line-height: 1.35; }
.runtime-equipment-attributes > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 3px; min-width: 0; }
.runtime-equipment-attributes dt, .runtime-equipment-pending { color: #76879b; font-size: 10px; overflow-wrap: anywhere; }
.runtime-equipment-attributes dd { margin: 0; min-width: 0; max-width: 100%; color: #305b8d; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.scroll-top-button { position: fixed; z-index: 41; right: 6px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; width: 30px; height: 34px; min-height: 34px; padding: 5px; border: 1px solid #dce5ef; border-radius: 9px; background: #fffffff0; color: #6d87a6; box-shadow: 0 2px 9px #304d6d18; opacity: .75; }
.scroll-top-button[hidden] { display: none; }
.scroll-top-button:hover, .scroll-top-button:focus-visible { opacity: 1; color: #2567b8; background: #edf4ff; }
.scroll-top-button:focus-visible { outline: 2px solid #78a8e8; outline-offset: 2px; }
.scroll-top-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.runtime-progress { height: 5px; margin: 10px 0; background: #eef3f9; border-radius: 5px; overflow: hidden; }
.runtime-progress i { display: block; height: 100%; background: #78a8e8; border-radius: inherit; }
.runtime-current-task { background: #f4f8ff; padding: 10px 12px; border-radius: 9px; font-size: 12px; }
.runtime-current-task h3 { margin: 0 0 6px; }
.runtime-current-task p { margin: 6px 0; }
.runtime-current-task small { color: #7588a1; }
.runtime-rank-list { list-style: none; padding: 0; margin: 0; }
.runtime-rank-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; font-size: 12px; border-bottom: 1px solid #f0f3f8; }
.runtime-rank-list li > span { overflow-wrap: anywhere; }
.runtime-rank { color: #8b9fb9; font-variant-numeric: tabular-nums; }
.runtime-order-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.runtime-order { min-width: 0; padding: 8px; border: 1px solid #e8edf5; border-radius: 7px; }
.runtime-order > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; }
.runtime-order > div strong { white-space: nowrap; font-weight: 500; }
.runtime-order .is-ready strong { color: #329783; }
.runtime-order .is-short strong { color: #c48438; }
.runtime-plot-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.runtime-plot { display: grid; gap: 4px; padding: 8px 6px; min-width: 0; border-radius: 7px; border: 1px solid #dfe9f7; background: #f4f8ff; text-align: center; }
.runtime-plot :is(small, span) { font-size: 11px; color: #788ca5; font-variant-numeric: tabular-nums; }
.runtime-plot strong { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.runtime-plot.is-empty { background: #fafbfd; border-style: dashed; }
.runtime-plot.is-mature { background: #effaf5; border-color: #d4ebe0; }
.runtime-plot.is-mature span { color: #429278; }
.runtime-panel-note { margin: 16px 0 0; }
.runtime-count-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 18px; font-size: 11px; }
.runtime-count-list > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #f0f3f8; padding: 4px 0; }
.runtime-count-list span { overflow-wrap: anywhere; }
.runtime-count-list strong { white-space: nowrap; font-weight: 500; text-align: right; }
.runtime-count-list small { display: block; font-size: 10px; color: #8d9aae; }
.runtime-reward-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 5px; font-size: 11px; }
.runtime-reward-grid > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; padding: 5px 7px; border-radius: 5px; background: #f4f8fd; }
.runtime-reward-grid span { min-width: 0; overflow-wrap: anywhere; }
.runtime-reward-grid strong { flex-shrink: 0; white-space: nowrap; font-weight: 500; }
.runtime-reward-grid small, .runtime-card-body h3 > small { color: #8d9aae; font-size: 10px; font-weight: 400; }
.runtime-pill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.runtime-pill-grid > div { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 6px 8px; border-radius: 6px; background: #f4f8fd; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.runtime-pill-grid strong { color: #466b98; font-weight: 500; }
.runtime-pill-grid span { color: #76879b; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .runtime-pill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.runtime-talent-line { max-width: 100%; overflow-wrap: anywhere; padding: 4px 0; font-size: 11px; line-height: 1.7; }
.runtime-talent-line strong { color: #466b98; font-weight: 500; white-space: nowrap; }
.runtime-usage { margin-top: 10px; padding-top: 8px; border-top: 1px solid #edf1f7; }
.runtime-ball-levels, .runtime-lineup { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 6px; }
.runtime-ball-levels > div, .runtime-lineup > div { display: grid; gap: 4px; text-align: center; padding: 7px 4px; border-radius: 6px; background: #f3f7fe; border: 1px solid #e1eaf7; font-size: 12px; }
.runtime-ball-levels b, .runtime-lineup strong { font-size: 11px; color: #466b98; overflow-wrap: anywhere; }
.runtime-ball-levels small, .runtime-lineup span { color: #7a8a9f; font-size: 10px; }
.runtime-road-board { display: grid; grid-template-columns: repeat(var(--board-columns), minmax(0, 1fr)); width: 100%; max-width: 360px; gap: 2px; padding: 5px; box-sizing: border-box; background: #e8eef6; border-radius: 8px; }
.runtime-road-cell { display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: 1; min-width: 0; box-sizing: border-box; border: 1px solid transparent; border-radius: 3px; font-size: 11px; line-height: 1.3; }
.runtime-road-cell.has-unit { color: hsl(var(--unit-hue), 35%, 32%); background: hsl(var(--unit-hue), 55%, 92%); }
.runtime-road-cell.has-top { border-top-color: hsl(var(--unit-hue), 35%, 72%); }
.runtime-road-cell.has-right { border-right-color: hsl(var(--unit-hue), 35%, 72%); }
.runtime-road-cell.has-bottom { border-bottom-color: hsl(var(--unit-hue), 35%, 72%); }
.runtime-road-cell.has-left { border-left-color: hsl(var(--unit-hue), 35%, 72%); }
.runtime-road-cell strong { max-width: 100%; overflow-wrap: anywhere; font-size: 12px; font-weight: 600; }
.runtime-road-cell span { font-size: 10px; }
.runtime-road-cell.is-empty { background: #f9fbfe; border: 1px dashed #c8d6e7; }
.runtime-road-cell.is-locked { background: #dce4ef; }
.runtime-2048 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 280px; padding: 7px; background: #dde7f4; border-radius: 8px; }
.runtime-2048 > div { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0; background: #f3f6fb; border-radius: 5px; font-size: clamp(12px, 3vw, 19px); color: #365982; font-weight: 600; }
.runtime-2048 .has-tile { background: hsl(calc(220 - var(--tile-shade) * 8) 58% calc(96% - var(--tile-shade) * 3%)); }
@media (max-width: 650px) {
    .runtime-panel { padding: 6px; }
    .runtime-card-grid { grid-template-columns: minmax(0, 1fr); }
    .runtime-card { padding: 0; }
    .runtime-card > summary { grid-template-columns: minmax(0, 1fr) auto 12px; padding: 8px; gap: 4px 8px; }
    .runtime-summary-metrics { grid-row: 2; grid-column: 1 / 4; }
    .runtime-status { grid-column: 2; grid-row: 1; }
    .runtime-chevron { grid-column: 3; grid-row: 1; }
    .runtime-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .runtime-count-list { grid-template-columns: minmax(0, 1fr); }
    .runtime-reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .runtime-plot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .runtime-equipment-slot { padding: 4px 3px; }
    .runtime-plot { padding: 7px 4px; }
    #dashboardView .log-heading .log-view-tabs { order: 2; }
}
#dashboardView .role-detail { position: relative; display: block; height: auto; min-height: 0; }
#dashboardView .log-panel { position: relative; display: block; overflow: visible; box-shadow: 0 2px 10px #19385c05; }
#dashboardView :is(.log-layout, .runtime-panel) { height: calc(var(--viewport-height) - 226px); min-height: 160px; }
#dashboardView .log-layout { border-top: 0; grid-template-rows: minmax(0, 1fr); }
#dashboardView .runtime-panel { overflow-y: auto; overscroll-behavior-y: contain; overflow-anchor: none; scrollbar-gutter: stable; scroll-behavior: auto; }
.log-heading { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px; border-bottom: 1px solid #dce5ef; border-radius: 8px 8px 0 0; background: #ffffffdb; }
.log-heading h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; font-size: 14px; font-weight: 650; }
.log-heading button { min-height: 36px; padding: 0 10px; font-size: 13px; }
.log-heading > button { flex: 0 0 auto; }
.log-timestamp-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; flex-shrink: 0; color: #71839a; font-size: 12px; cursor: pointer; white-space: nowrap; }
.log-timestamp-toggle input { width: 15px; height: 15px; min-height: 0; margin: 0; accent-color: #397aca; cursor: pointer; }
.log-timestamp { color: #8090a4; font-weight: 400; font-variant-numeric: tabular-nums; }
#dashboardView .log-tag { font-size: 14px; min-height: 32px; }
#dashboardView #logContent { min-width: 0; padding: 12px 14px; border-radius: 0 0 8px 0; overflow-wrap: anywhere; }
#dashboardView .log-tag-filter { border-radius: 0 0 0 8px; }
#logDock { position: relative; right: auto; bottom: auto; flex-direction: row; gap: 2px; padding: 2px; border: 0; border-radius: 8px; background: #f1f5fb; box-shadow: none; backdrop-filter: none; }
#logDock > * { flex: 0 0 auto; }
#logDock .hall-dock-controls > * { flex: 0 0 auto; }
#logDock .hall-dock-action { flex-direction: row; gap: 5px; width: auto; height: 32px; min-height: 32px; padding: 0 8px; border-radius: 6px; font-size: 12px; }
#logDock .hall-dock-collapse { flex-basis: 32px; width: 32px; padding: 0; }
#logDock svg { width: 16px; height: 16px; flex-basis: 16px; }
#logDock .hall-dock-panel { right: 0; top: calc(100% + 8px); bottom: auto; width: min(310px, calc(100vw - 50px)); }
#logActionsPanel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: calc(var(--viewport-height) - 150px); overflow-y: auto; }
#logActionsPanel > button { width: 100%; min-height: 40px; justify-self: stretch; }
#logActionsPanel .auto-refresh { grid-column: 1 / -1; margin-left: 0; min-height: 32px; font-size: 12px; }
#configView { --config-control-columns: minmax(0, 2fr) minmax(0, 3fr); }
#configView .detail-heading { gap: 12px; margin-bottom: 12px; }
#configView .detail-heading h1 { font-size: 19px; }
#configView .back-button { font-size: 13px; min-height: 40px; border-radius: 9px; }
#configView .config-detail { gap: 10px; }
#configView .config-header { min-height: 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--surface-line); box-shadow: none; background: linear-gradient(100deg, #f2f7ff, #fff 60%); flex-direction: row; align-items: center; }
#configView .config-header h3 { font-size: 17px; color: #274466; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#configView .config-actions { display: flex; width: auto; gap: 16px; flex-wrap: wrap; }
#configView .config-expand-control { gap: 8px; font-size: 12px; }
.config-utilities { position: relative; }
.config-utilities summary { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid #dae5f2; border-radius: 9px; color: #51657e; background: #fff; font-size: 13px; cursor: pointer; list-style: none; }
.config-utilities summary::-webkit-details-marker { display: none; }
.config-utilities-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; display: grid; width: 164px; gap: 4px; padding: 6px; background: #fff; border: 1px solid #e0e8f2; border-radius: 12px; box-shadow: 0 10px 35px #243e641a; }
.config-utilities-menu button { width: 100%; text-align: left; min-height: 42px; border-radius: 7px; padding: 0 12px; font-size: 13px; }
#configView .config-hint { font-size: 12px; line-height: 1.6; color: #79879a; padding: 0 2px; }
#configView .config-toolbar { top: 78px; padding: 10px; border-radius: 12px; border-color: var(--surface-line); background: #f8fafd; box-shadow: 0 3px 10px #223b5e05; gap: 12px; }
#configView .config-category-bar { gap: 4px; }
#configView .config-category-tab { min-height: 40px; padding: 0 16px; border-radius: 8px; border: 0; background: transparent; font-size: 14px; font-weight: 500; color: #667991; box-shadow: none; }
#configView .config-category-tab.active { background: #fff; color: #2465b7; font-weight: 700; box-shadow: 0 2px 7px #264b7820; }
#configView .config-search { flex-basis: 230px; }
#configView .config-search input { min-height: 40px; border-radius: 8px; font-size: 14px; }
#configView .config-section-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
#configView .config-section { border-color: var(--surface-line); border-radius: 9px; box-shadow: 0 2px 5px #203e5f03; }
#configView .config-section-toggle { min-height: 48px; padding: 8px 12px; gap: 10px; }
#configView .config-section-toggle h3 { flex: 1; font-size: 14px; font-weight: 600; }
#configView .config-section-chevron { width: 8px; height: 8px; color: #94a3b8; }
#configView .expanded .config-section-toggle { background: #fbfdff; }
#configView .config-section-description { padding: 10px 12px 0; font-size: 12px; color: #728199; line-height: 1.6; }
#configView .config-grid { grid-template-columns: minmax(0, 1fr); padding: 10px 12px 12px; gap: 8px; }
#configView .config-related-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; align-items: start; }
#configView .config-related-row > .config-field { grid-column: auto; height: 100%; }
#configView .config-related-row > .config-field:only-child { grid-column: 1 / -1; }
#configView .config-related-row > .config-field.wide { grid-column: 1 / -1; }
#configView .config-row-label { grid-column: 1 / -1; padding: 5px 2px 0; color: #667991; font-size: 12px; font-weight: 600; text-align: center; }
#configView .config-field { padding: 8px 10px; border-color: #eaf0f6; background: #f8fafc; border-radius: 8px; min-height: 0; grid-template-columns: var(--config-control-columns); gap: 6px 12px; align-items: center; text-align: left; }
#configView :is(.config-field, .battle-preset-row, .challenge-task-control, .competition-task-toggle, .competition-task-types) > :is(span:first-child, .config-field-heading) { justify-self: stretch; text-align: right; }
#configView :is(.config-field, .battle-preset-row, .challenge-task-control, .competition-task-toggle, .competition-task-types) > :nth-child(2) { justify-self: start; min-width: 0; max-width: 100%; }
#configView .config-field > :is(span:first-child, .config-field-heading) { font-size: 13px; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
#configView .config-field-help { display: inline; font-weight: 400; }
#configView .config-field-help > summary { display: inline-grid; vertical-align: middle; place-items: center; width: 24px; height: 24px; margin-left: 2px; border-radius: 50%; color: #7185a0; cursor: pointer; list-style: none; }
#configView .config-field-help > summary > span { display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid #bac9dc; border-radius: 50%; background: #f5f8fc; font: 600 10px/1 sans-serif; }
#configView .config-field-help > summary::-webkit-details-marker { display: none; }
#configView .config-field-help > summary:hover, #configView .config-field-help[open] > summary { background: #e6eef9; color: #2465b7; }
#configView .config-field-help > small { white-space: pre-line; }
#configView .battle-preset-row > .config-field-heading { color: #334155; font-size: 13px; font-weight: 600; min-width: 0; }
#configView .config-field small { color: #64748b; font-size: 12px; line-height: 1.65; font-weight: 400; }
#configView .config-field :is(input, select) { min-width: 0; max-width: 100%; min-height: 30px; height: 30px; border-radius: 6px; background-color: #fff; font-size: 12px; padding-inline: 7px; }
#configView .field-select > select { width: min(220px, 100%); }
#configView .number-wrap { min-width: 0; width: min(120px, 100%); }
#configView .number-wrap input { width: 100%; }
#configView .number-wrap > span { white-space: nowrap; flex-shrink: 0; }
#configView .choice-row { gap: 4px; justify-content: flex-start; }
#configView .config-field > :is(.config-text-input, .game-code-entry, .config-select-sequence, .config-searchable-options, .homeland-schedules) { width: 100%; }
#configView .config-field > .config-text-input { max-width: 420px; }
#configView .config-field > :is(.homeland-schedules, .homeland-rules-grid, .homeland-extreme-estimate) { grid-column: 1 / -1; width: 100%; }
#configView .config-field.challenge-task-row { grid-template-columns: minmax(0, 1fr); }
#configView .challenge-task-row > span:first-child { text-align: center; }
#configView .challenge-task-controls { width: 100%; grid-template-columns: minmax(0, 1fr); }
#configView .competition-task-row { grid-template-columns: minmax(0, 1fr); }
#configView .competition-task-toggle { padding-right: 0; border-right: 0; }
#configView :is(.challenge-task-control, .competition-task-toggle, .competition-task-types) { display: grid; width: 100%; grid-template-columns: var(--config-control-columns); gap: 6px 12px; align-items: center; }
#configView .choice-chip { min-height: 26px; border-radius: 5px; padding: 3px 7px; font-size: 12px; white-space: normal; line-height: 1.4; height: auto; box-shadow: none; }
#configView .battle-preset-card { border-radius: 10px; box-shadow: none; }
#configView .battle-preset-controls { width: 100%; }
#configView .battle-preset-row { grid-template-columns: var(--config-control-columns); gap: 6px 12px; text-align: left; }
#configView .battle-preset-row .choice-row { justify-content: flex-start; }
#configView .battle-preset-title { justify-content: center; flex-wrap: wrap; text-align: center; }
#configView .switch-control { width: 40px; min-width: 40px; height: 22px; min-height: 22px; background: #d8e1ed; border: 1px solid #d0dae7; box-shadow: none; }
#configView .switch-control .switch-thumb { top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #172e5320; }
#configView .switch-control .switch-label { display: none; }
#configView .switch-control.on { background: #397aca; border-color: #397aca; }
#configView .switch-control.on .switch-thumb { transform: translateX(18px); }
#configView .switch-control:focus-visible { outline: 3px solid #a3c3eb; outline-offset: 3px; }
.config-save-bar { position: sticky; bottom: calc(var(--viewport-bottom-offset) + 12px + var(--safe-bottom)); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid #dbe5f2; border-radius: 10px; background: rgba(255,255,255,.97); box-shadow: 0 -4px 24px #2b496810; }
.config-save-bar > div { display: grid; min-width: 0; gap: 3px; }
.config-save-bar strong { font-size: 13px; font-weight: 600; color: #718297; }
.config-save-bar small { font-size: 12px; color: #8090a4; }
.config-save-bar button { min-width: 108px; min-height: 38px; border-radius: 7px; }
.config-save-bar.has-changes { border-color: #a8c7ee; }
.config-save-bar.has-changes strong { color: #2565b6; }
.config-bounded-time { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 4px; min-width: 0; width: 100%; }
.config-bounded-time .config-select { width: 100%; min-width: 0; }
.config-bounded-time small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; white-space: nowrap; text-align: right; }
.config-time-picker { display: grid; min-width: 0; width: min(220px, 100%); }
#configView .config-time-picker > input[type="time"] { width: 100%; max-width: 100%; }
.config-time-popover { display: block; position: fixed; inset: auto; z-index: 100; margin: 0; padding: 12px; width: 240px; max-width: calc(100vw - 24px); border: 1px solid #dbe5f2; border-radius: 10px; color: #334b69; background: #fff; box-shadow: 0 8px 28px #243e6424; }
.config-time-popover[hidden] { display: none; }
.config-time-popover-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.config-time-popover-heading strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
#configView .config-time-popover-heading button { min-height: 28px; padding: 0 10px; font-size: 12px; }
.config-time-sliders { display: grid; }
#configView .config-time-slider { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 4px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 400; }
#configView .config-time-slider input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; max-width: 100%; height: 24px; min-height: 24px; margin: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; box-shadow: none; cursor: pointer; }
#configView .config-time-slider input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: #c7d6e8; }
#configView .config-time-slider input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border: 1px solid #fff; border-radius: 50%; background: #397aca; box-shadow: 0 1px 3px #234d7930; }
#configView .config-time-slider input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: #c7d6e8; }
#configView .config-time-slider input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; background: #397aca; box-shadow: 0 1px 3px #234d7930; }
#configView .config-time-slider input[type="range"]:focus-visible { outline: 2px solid #8bb5e8; outline-offset: 1px; }
#configView .config-time-slider input[type="range"]:disabled { cursor: default; opacity: .45; }
.homeland-schedule-time > .config-time-picker { flex: 1 1 0; width: 126px; max-width: 138px; }
.inline-add > .config-time-picker { width: 132px; }
@media (min-width: 761px) {
    #rolesView .role-main-actions > button { flex: 1 1 0; }
    #rolesView .role-main-actions > button.ghost { background: #f6f8fb; }
}
@media (max-width: 1000px) and (min-width: 761px) {
    #rolesView .role-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #configView .config-toolbar { flex-direction: column; align-items: stretch; }
    #configView .config-search { flex-basis: auto; width: 100%; }
}
@media (max-width: 920px) {
    #dashboardView .log-layout { grid-template-rows: auto minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .header-inner { padding-inline: 8px; }
    .main { padding: 14px 12px 24px; }
    .role-hall-dock { right: 12px; }
    #rolesView .role-search input { font-size: 16px; min-height: 40px; }
    #rolesView .role-batch-actions { width: auto; gap: 6px; }
    #rolesView .role-batch-actions button { flex: 1; min-height: 40px; font-size: 12px; padding-inline: 8px; white-space: nowrap; }
    #rolesView .role-list { gap: 10px; }
    #rolesView .role-main-actions > button { flex: 1 1 0; min-width: 0; min-height: 42px; padding-inline: 6px; font-size: 13px; }
    #rolesView .role-main-actions > button.ghost { background: #f6f8fb; }
    #rolesView .role-actions-menu > summary { width: 36px; height: 42px; }
    #rolesView .role-actions-popover button { min-height: 42px; }
    .log-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title back" "tabs tabs" "time actions"; gap: 2px 8px; padding: 6px 10px; }
    .log-view-tabs { grid-area: tabs; justify-self: start; margin: 4px 0; }
    .log-heading h1 { grid-area: title; }
    .log-heading > button { grid-area: back; justify-self: end; }
    .log-timestamp-toggle { grid-area: time; }
    #logDock { grid-area: actions; justify-self: end; }
    #logDock .hall-dock-action { width: 36px; height: 34px; min-height: 34px; padding: 0; }
    #logDock .hall-dock-action > span { display: none; }
    .log-search-bar { gap: 8px; padding-inline: 10px; }
    .log-search-field input { font-size: 16px; }
    #dashboardView :is(.log-layout, .runtime-panel) { height: calc(var(--viewport-height) - 236px); }
    #dashboardView #logContent { padding: 10px 12px; border-radius: 0 0 8px 8px; }
    #dashboardView .log-tag-filter { border-radius: 0; }
    #configView .detail-heading { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    #configView .detail-heading h1 { font-size: 15px; }
    #configView .config-header { padding: 8px 10px; flex-wrap: nowrap; gap: 10px; }
    #configView .config-header h3 { font-size: 14px; }
    #configView .config-actions { width: auto; flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; }
    #configView .config-expand-control { gap: 4px; font-size: 11px; white-space: nowrap; }
    #configView .config-utilities summary { padding-inline: 8px; font-size: 12px; gap: 4px; min-height: 36px; }
    #configView .config-hint { font-size: 11px; }
    #configView .config-toolbar { top: 68px; padding: 6px; gap: 6px; }
    #configView .config-category-tab { min-height: 32px; padding-inline: 10px; font-size: 12px; }
    #configView .config-search { flex-basis: auto; }
    #configView .config-search input { font-size: 13px; min-height: 34px; height: 34px; }
    #configView .config-section-toggle { min-height: 38px; padding: 7px 10px; }
    #configView .config-section-toggle h3 { font-size: 13px; }
    #configView .config-section-description { padding: 8px 10px 0; }
    #configView .config-grid { grid-template-columns: minmax(0, 1fr); padding: 8px; gap: 6px; }
    #configView .config-field { padding: 6px 8px; }
    #configView .config-field > :is(span:first-child, .config-field-heading), #configView .battle-preset-row > .config-field-heading { font-size: 12px; font-weight: 500; }
    #configView :is(.config-field, .battle-preset-row) :is(input, select) { min-height: 30px; height: 30px; font-size: 12px; }
    #configView .choice-chip { min-height: 26px; padding: 3px 7px; font-size: 12px; }
    #configView .switch-control, #configView .switch-control.on { height: 32px; min-height: 32px; background: transparent; border: 0; }
    #configView .switch-control::before { content: ""; position: absolute; inset: 5px 0; border-radius: 11px; background: #d8e1ed; transition: background .18s; }
    #configView .switch-control .switch-thumb { top: 8px; left: 3px; }
    #configView .switch-control.on::before { background: #397aca; }
    #configView .config-save-bar { bottom: calc(var(--viewport-bottom-offset) + 8px); padding: 7px 10px; margin-bottom: env(safe-area-inset-bottom, 0px); gap: 8px; }
    #configView .config-save-bar button { min-width: 96px; padding-inline: 10px; }
    #configView .config-save-bar strong { font-size: 12px; }
    #configView .config-save-bar small { font-size: 11px; }
}
@media (max-width: 760px) {
    #configView [data-config-section="danRealm"] :is(.field-multiOption, .field-selectSequence) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    #configView [data-config-section="danRealm"] :is(.field-multiOption, .field-selectSequence) > .config-field-heading { text-align: left; }
    #configView [data-config-section="danRealm"] :is(.choice-row, .config-select-sequence, .config-searchable-options) { width: 100%; grid-column: 1 / -1; }
    #configView [data-config-section="danRealm"] .config-select-sequence { gap: 8px; }
    #configView [data-config-section="danRealm"] .choice-row { gap: 6px; }
    #configView [data-config-section="danRealm"] .choice-chip { min-height: 32px; padding: 5px 10px; }
    #configView [data-config-section="danRealm"] .competition-task-types { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    #configView [data-config-section="danRealm"] .competition-task-types > .config-field-heading { text-align: left; }
    #configView [data-config-section="danRealm"] .competition-task-types .choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #configView [data-config-section="danRealm"] .competition-task-types .choice-chip { padding-inline: 4px; }
    [data-runtime-key="danRealm"] .runtime-order > div { align-items: start; }
    [data-runtime-key="danRealm"] .runtime-order > div > span { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
    [data-runtime-key="danRealm"] .runtime-plot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
    #rolesView .role-card { padding-inline: 12px; }
    #rolesView .role-card-heading { gap: 6px; }
    #rolesView .role-card-title { gap: 8px; }
    #rolesView .role-card .status-pill { padding-inline: 6px; font-size: 10px; }
}

/* Tools follow the compact cards used in the role hall and configuration. */
#toolsView { --surface-line: #e3eaf3; --soft-blue: #f0f5fc; --primary: #397aca; --primary-dark: #2867b4; --muted: #71839a; }
#toolsView .tool-shell { grid-template-columns: 160px minmax(0, 1fr); align-items: start; gap: 14px; }
#toolsView .tool-shell > * { min-width: 0; }
#toolsView .tool-list { position: sticky; top: 84px; gap: 4px; padding: 6px; border-color: var(--surface-line); border-radius: 10px; background: #fff; box-shadow: 0 2px 10px #19385c05; }
#toolsView .tool-list-item { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; color: #647b98; background: transparent; font-size: 13px; line-height: 1.4; }
#toolsView .tool-list-item svg { flex: 0 0 17px; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#toolsView .tool-list-item:hover { color: #2867b4; background: #f5f8fd; }
#toolsView .tool-list-item.active { color: #2867b4; border-color: #dce8f7; background: #edf4ff; box-shadow: inset 3px 0 #80a9dd; font-weight: 600; }
#toolsView button { font-size: 12px; border-radius: 7px; }
#toolsView button:focus-visible, #logDock button:focus-visible { outline: 3px solid #a3c3eb; outline-offset: 2px; }
#toolsView :is(input, select) { min-width: 0; max-width: 100%; min-height: 36px; border: 1px solid #dce5ef; border-radius: 7px; padding: 6px 9px; color: #334b69; background-color: #fff; font-size: 13px; }
#toolsView :is(input, select):focus { border-color: #89afe0; outline: 2px solid #dceafb; outline-offset: 1px; }
#toolsView .hint { color: var(--muted); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
#toolsView :is(.merchant-path-header, .merchant-tool-panel, .union-power-header, .union-power-panel, .holy-land-heading, .union-insight-view) { min-width: 0; border: 1px solid var(--surface-line); border-radius: 10px; background: #fff; box-shadow: 0 2px 10px #19385c05; }
#toolsView :is(.merchant-path-header, .union-power-header, .holy-land-heading) { padding: 14px 16px; background: linear-gradient(100deg, #f2f7ff, #fff 65%); }
#toolsView :is(.merchant-path-header, .union-power-header) > div:first-child { min-width: 0; }
#toolsView :is(.merchant-path-header h3, .union-power-header h3, .holy-land-heading h2, .union-insight-heading h3, .activity-tree-panel > h2) { margin: 0; color: #274466; font-size: 18px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
#toolsView .activity-tree-panel > h2 + .hint { margin-bottom: 14px; }
#toolsView .activity-tree-panel { padding: 14px 16px; }
#toolsView .activity-tree-panel h4 { color: #334b69; font-size: 14px; font-weight: 600; }
#toolsView :is(.activity-tree-controls label, .activity-tree-gift, .merchant-controls label, .mountain-query-form > label) { color: #334b69; font-size: 13px; font-weight: 500; }
#toolsView .activity-tree-controls label { min-width: 0; }
#toolsView .activity-tree-gifts { margin-top: 16px; gap: 8px 12px; }
#toolsView .activity-tree-gift { grid-template-columns: minmax(0, 1fr) 74px; gap: 10px; padding: 9px 10px; border: 1px solid #edf1f6; border-radius: 8px; background: #f8fafc; }
#toolsView .activity-tree-gift small { font-size: 11px; line-height: 1.6; }
#toolsView .activity-tree-gift input { text-align: right; }
#toolsView .activity-tree-full-gift { justify-self: end; align-self: center; color: #2e609b; font-size: 12px; white-space: nowrap; }
#activityTreeReverseBtn { align-self: end; }
#toolsView .activity-tree-metrics { gap: 10px; }
#toolsView .activity-tree-metrics > div { min-width: 0; padding: 12px; border: 1px solid #e3ebf6; border-radius: 8px; background: #f5f8fd; }
#toolsView .activity-tree-metrics small { font-size: 12px; }
#toolsView .activity-tree-metrics > div > span { color: var(--muted); font-size: 12px; }
#toolsView .activity-tree-metrics strong { margin-top: 6px; color: #2e609b; font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#toolsView :is(.activity-tree-tiers, #mountainServerList) { border: 1px solid var(--surface-line); border-radius: 8px; background: #fff; }
#toolsView .activity-tree-tiers > summary { min-height: 40px; padding: 10px 12px; color: #536b89; font-size: 12px; font-weight: 500; cursor: pointer; }
#toolsView .activity-tree-tiers[open] > summary { border-bottom: 1px solid var(--surface-line); background: #f8fafd; }
#toolsView .activity-tree-tiers { overflow-x: auto; }
#toolsView .activity-tree-tiers table { margin-top: 0; }
#toolsView :is(th, td) { border-bottom-color: #e9eef5; font-size: 12px; }
#toolsView th { color: #647b98; background: #f6f9fd; font-weight: 500; }
#toolsView tbody tr:hover { background: #f5f9ff; }
#toolsView :is(.merchant-table-wrap, .union-power-table-wrap, .union-insight-table-wrap, .activity-tree-tiers) { scrollbar-width: thin; scrollbar-color: #cbd8e9 transparent; }
#toolsView .merchant-import-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; }
#toolsView .merchant-import-role { width: 100%; max-width: none; gap: 6px; font-size: 12px; }
#toolsView .merchant-import-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
#toolsView .merchant-import-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#toolsView .merchant-import-pagination .hint { margin: 0 6px 0 0; }
#toolsView .merchant-import-pagination button { min-height: 30px; padding-inline: 10px; }
#toolsView .merchant-warning { position: static; padding: 10px 14px; border-color: #f1dfbd; border-radius: 8px; color: #93703e; background: #fffbf2; box-shadow: none; font-size: 12px; font-weight: 400; line-height: 1.6; }
#toolsView .merchant-controls { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; padding: 14px 16px; }
#toolsView .merchant-prices .config-section-toggle { min-height: 44px; padding: 10px 16px; color: #334b69; background: #fff; }
#toolsView .merchant-prices .config-section-toggle:hover { background: #f6f9fd; }
#toolsView .merchant-prices .config-section-toggle h3 { font-size: 14px; font-weight: 600; }
#toolsView .merchant-name-text { font-size: 12px; font-weight: 500; }
#toolsView .merchant-price-table .merchant-sticky-col { background: #fff; }
#toolsView .merchant-price-table thead .merchant-sticky-col { background: #f6f9fd; }
#toolsView .merchant-result-summary { padding: 10px 14px; background: #f6f9fd; }
#toolsView .merchant-result-summary span { font-size: 12px; border-color: #e3ebf6; }
#toolsView .merchant-result-summary strong { color: #2e609b; font-weight: 600; }
#toolsView .merchant-tool-panel .section-title { padding: 12px 14px; }
#toolsView .merchant-tool-panel .section-title h3 { color: #334b69; font-size: 14px; font-weight: 600; }
#toolsView .merchant-tool-panel .section-title p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
#toolsView .merchant-path-result-empty { font-size: 12px; }
#toolsView .union-power-meta { gap: 5px 14px; font-size: 12px; }
#toolsView .union-power-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; padding: 12px 14px; background: #f8fafd; }
#toolsView .union-power-status { font-size: 11px; font-weight: 500; padding: 4px 8px; }
#toolsView #unionPowerMembers > .hint { margin: 0; padding: 10px 14px; }
#toolsView .union-power-member-error { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
#toolsView .union-power-member-error .hint { margin: 0; }
#toolsView .union-power-table .union-name { font-weight: 600; }
#toolsView .union-power-advanced :is(.union-power-header, .union-power-panel) { border-color: #ecdfbf; box-shadow: 0 2px 10px #916c1808; }
#toolsView .union-power-advanced .union-power-header { background: linear-gradient(100deg, #fff9e9, #fff 75%); }
.power-monitor-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px; padding: 14px; border: 1px solid #e3ebf6; border-radius: 8px; background: #f8fafd; }
.power-monitor-form label { display: grid; gap: 7px; color: #536b89; font-size: 13px; min-width: 0; }
.power-monitor-form :is(input, select) { width: 100%; min-width: 0; }
.power-monitor-amount { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 6px; }
.power-monitor-form-actions { display: flex; gap: 8px; grid-column: 1 / -1; }
.power-monitor-form > .hint { grid-column: 1 / -1; margin: 0; }
.power-monitor-table { width: 100%; min-width: 640px; font-size: 13px; }
.power-monitor-table :is(th, td) { padding: 10px 12px; text-align: left; border-bottom: 1px solid #edf1f6; }
.power-monitor-table th { color: #536b89; background: #f8fafd; }
.power-monitor-table td { white-space: nowrap; }
.power-monitor-table td small { display: block; margin-top: 4px; }
.power-monitor-status { display: inline-block; border-radius: 6px; padding: 3px 6px; background: #eef3f9; color: #536b89; white-space: nowrap; }
.power-monitor-status.near { background: #fff5dc; color: #936500; }
.power-monitor-status.over { background: #fff0ee; color: #bd4237; }
.power-monitor-unread { color: #bd4237; }
.power-monitor-actions button { padding: 5px 7px; font-size: 12px; margin: 2px; }
.power-monitor-editing { background: #f8fafd; }
.power-monitor-table tr[data-monitor-watch-id] { scroll-margin-block: 80px; }
.power-monitor-highlight { background: #fff2c7; animation: power-monitor-highlight 900ms ease-in-out 4; outline: 2px solid #d8a73c; outline-offset: -2px; }
@keyframes power-monitor-highlight { 50% { background: #ffdf88; } }
@media (prefers-reduced-motion: reduce) { .power-monitor-highlight { animation: none; } }
.toast.actionable { cursor: pointer; }
.toast.actionable:focus-visible { outline: 2px solid #d8a73c; outline-offset: 3px; }
.power-monitor-inline-editor { display: grid; gap: 8px; min-width: 220px; max-width: 300px; white-space: normal; scroll-margin: 12px; }
.power-monitor-inline-amount { min-width: 180px; }
.power-monitor-inline-amount :is(input, select) { width: 100%; min-width: 0; }
.power-monitor-inline-near { display: flex; align-items: center; gap: 4px; color: #536b89; font-size: 12px; }
.power-monitor-inline-near input { width: 64px; }
.power-monitor-inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 100px; }
.power-monitor-inline-error { flex-basis: 100%; margin: 4px 0 0; color: #bd4237; font-size: 12px; }
.power-monitor-empty { padding: 18px; color: var(--muted); font-size: 13px; }
.power-monitor-reminder { position: fixed; bottom: calc(var(--viewport-bottom-offset) + 18px + var(--safe-bottom)); left: max(18px, var(--safe-left)); z-index: 90; border: 1px solid #e8c778; border-radius: 20px; background: #fff5dc; color: #805500; box-shadow: 0 4px 16px #916c1825; padding: 9px 14px; font-size: 13px; }
@media (max-width: 760px) {
    .power-monitor-form { grid-template-columns: minmax(0, 1fr); padding: 10px; margin: 10px; }
    .power-monitor-reminder { bottom: calc(var(--viewport-bottom-offset) + 12px + var(--safe-bottom)); left: max(12px, var(--safe-left)); max-width: calc(100vw - 80px); }
}
#toolsView .union-power-advanced .union-access-note { background: #fff5d9; }
#toolsView :is(.holy-land-tabs, .holy-land-controls, .holy-land-period) { min-width: 0; border: 1px solid var(--surface-line); border-radius: 10px; background: #fff; padding: 10px 12px; }
#toolsView .holy-land-heading + .hint { margin: 0 2px; }
#toolsView .holy-land-tabs { gap: 4px; padding: 4px; }
#toolsView .holy-land-tabs button { min-height: 36px; border-color: transparent; color: #71839a; background: transparent; }
#toolsView .holy-land-tabs button.active { border-color: #dce8f7; color: #2867b4; background: #edf4ff; }
#toolsView .holy-land-halves { border-color: #dce5ef; border-radius: 7px; }
#toolsView .holy-land-halves button { min-height: 36px; color: #71839a; background: #f8fafd; }
#toolsView .holy-land-halves button.active { color: #2867b4; background: #edf4ff; }
#toolsView .holy-land-period { align-items: center; gap: 8px 12px; background: #f8fafd; }
#toolsView .holy-land-period select { min-width: 0; max-width: 100%; font-size: 12px; }
#toolsView .holy-land-group { border-color: var(--surface-line); border-radius: 10px; box-shadow: 0 2px 10px #19385c05; }
#toolsView .holy-land-group > summary { min-height: 44px; padding: 10px 14px; background: #f8fafd; }
#toolsView .holy-land-group > summary strong { font-size: 14px; font-weight: 600; }
#toolsView .holy-land-score { font-size: 14px; }
#toolsView .holy-land-union > summary:hover { background: #f8fafd; }
#toolsView .mountain-query-grid { margin: 0; padding: 10px; }
#toolsView .mountain-query-grid > span { border-radius: 7px; color: #71839a; background: #f8fafc; font-size: 12px; }
#toolsView .mountain-server-btn { border: 1px solid #e3ebf6; background: #f5f8fd; color: #536b89; }
#toolsView .mountain-server-btn[aria-pressed="true"] { border-color: #9cbbe3; color: #2867b4; background: #edf4ff; }
#toolsView .mountain-union-list article { border-color: #e3ebf6; border-radius: 8px; background: #f8fafd; }
#toolsView .union-insight-view { padding: 14px 16px; }
#toolsView .union-insight-heading { align-items: flex-start; }
#toolsView .union-insight-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; padding: 10px; border: 1px solid #e8eef6; border-radius: 8px; background: #f8fafd; }
#toolsView .union-insight-tabs { gap: 6px; padding-bottom: 6px; }
#toolsView .union-insight-tabs button { border: 1px solid transparent; border-radius: 7px; padding: 6px 12px; color: #71839a; background: transparent; }
#toolsView .union-insight-tabs button.active { border-color: #dce8f7; color: #2867b4; background: #edf4ff; font-weight: 600; }
#toolsView .union-insight-demo-notice { border-radius: 8px; border-color: #dce8f7; background: #f5f8fd; font-size: 12px; }
#toolsView .union-insight-member { border-color: var(--surface-line); border-radius: 8px; }
#toolsView .union-insight-member > summary:hover { background: #f8fafd; }
#toolsView .union-insight-member > summary strong { font-size: 13px; font-weight: 600; }
#toolsView .union-insight-tag { border-radius: 5px; font-size: 11px; }
#toolsView .union-insight-overview { border: 1px solid var(--surface-line); border-radius: 8px; }
#toolsView .union-insight-overview th { padding: 10px 8px; }
#toolsView .union-insight-member-name { display: flex; align-items: center; gap: 6px; max-width: 220px; }
#toolsView .union-insight-member-name strong { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
#toolsView .union-insight-basis-btn { flex: 0 0 28px; width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; border: 1px solid #dce5ef; border-radius: 50%; color: #647b98; background: #f5f8fd; font-size: 13px; line-height: 1; }
#toolsView .union-insight-basis-btn:hover { color: #2867b4; border-color: #9cbbe3; background: #edf4ff; }
.union-insight-basis-modal { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; color: #334b69; }
.union-insight-basis-modal::backdrop { background: rgba(15, 23, 42, 0.36); }
.union-insight-basis-modal .modal-header h3 { min-width: 0; font-size: 18px; overflow-wrap: anywhere; }
.union-insight-basis-modal h4 { margin: 18px 0 6px; font-size: 13px; }
.union-insight-basis-modal p { margin: 0; color: #71839a; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
#toolsView .config-message { border-radius: 8px; font-size: 12px; line-height: 1.6; }
@media (max-width: 1100px) {
    #toolsView .merchant-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
    #toolsView .tool-shell { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    #toolsView .tool-list { position: static; padding: 5px; gap: 4px; scrollbar-width: thin; }
    #toolsView .tool-list-item { min-height: 40px; padding: 8px 10px; white-space: nowrap; }
    #toolsView .tool-list-item.active { box-shadow: none; }
}
@media (max-width: 760px) {
    #toolsView :is(.merchant-path-header, .union-power-header) { flex-direction: row; align-items: flex-start; gap: 10px; }
    #toolsView :is(.merchant-path-header, .union-power-header, .holy-land-heading, .activity-tree-panel, .merchant-import-controls, .union-insight-view) { padding: 12px; }
    #toolsView :is(.merchant-path-header h3, .union-power-header h3, .holy-land-heading h2, .union-insight-heading h3, .activity-tree-panel > h2) { font-size: 16px; }
    #toolsView .merchant-path-header > div:first-child { flex: 1; }
    #toolsView .merchant-path-actions { flex-shrink: 0; width: auto; }
    #toolsView .merchant-path-actions button { width: auto; }
    #toolsView .merchant-import-controls { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    #toolsView .merchant-import-footer { gap: 8px; }
    #toolsView .merchant-import-footer > button { width: 100%; }
    #toolsView .merchant-controls { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    #toolsView .union-power-toolbar { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; }
    #toolsView .union-power-toolbar select { grid-column: 1 / -1; }
    #toolsView .union-insight-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
    #toolsView .union-insight-toolbar select { grid-column: 1 / -1; }
    #toolsView .union-insight-actions { gap: 6px; }
    #toolsView .union-insight-actions select { width: 100%; min-width: 0; flex-basis: 100%; }
    #toolsView .activity-tree-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    #toolsView .activity-tree-metrics > div { padding: 10px; }
    #toolsView .activity-tree-metrics strong { font-size: 18px; }
}

/* Operations workspace: bounded lists and stable form panels. */
.admin-workspace { display: grid; grid-template-columns: 156px minmax(0, 1fr); gap: 20px; align-items: start; }
.admin-workspace .admin-section-nav { display: flex; flex-direction: column; position: sticky; top: 20px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; gap: 6px; }
.admin-workspace .admin-section-nav button { text-align: left; width: 100%; }
.admin-workspace-content { min-width: 0; }
.admin-nav-toggle { display: none; }
.ops-heading, .ops-node header, .ops-role-row, .ops-event, .ops-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ops-heading h3 { margin: 4px 0 12px; }
.ops-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.ops-totals { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.ops-metric { padding: 12px; background: var(--panel-soft); border-radius: 8px; min-width: 0; }
.ops-metric span, .ops-node small, .ops-role-row small, .ops-event small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.ops-metric strong { font-size: 15px; overflow-wrap: anywhere; }
.ops-node-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.ops-node { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--panel); min-width: 0; }
.ops-node-warning { border-color: #f4c583; }
.ops-node > button { margin-top: 12px; }
.ops-badge { font-size: 12px; padding: 5px 8px; color: #166534; background: #e8f8ee; border-radius: 6px; white-space: nowrap; }
.ops-badge-danger { color: #b91c1c; background: #fee2e2; }
.ops-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 20px 0; }
.ops-controls label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 13px; min-width: 120px; }
.ops-controls input, .ops-controls select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; min-height: 38px; padding: 8px; max-width: 100%; }
.ops-warning { background: #fff7ed; color: #9a3412; padding: 12px; border-radius: 8px; }
.ops-version { overflow-wrap: anywhere; }
.ops-pagination { justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; font-size: 13px; }
.ops-role-row, .ops-event { border-bottom: 1px solid var(--line); padding: 14px 0; }
.ops-role-row > div, .ops-event > div { min-width: 0; overflow-wrap: anywhere; }
.ops-event time { font-size: 12px; color: var(--muted); }
#adminSystem details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
#adminSystem summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.ops-chart { margin: 20px 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.ops-chart svg { display: block; width: 100%; height: auto; margin-top: 12px; }
.ops-chart text { font-size: 10px; fill: var(--muted); }
#rolePagination { justify-content: flex-end; margin: 14px 0; }
.account-provider { margin-bottom: 14px; }
.account-provider-help { width: 22px; height: 22px; padding: 0; margin-left: 6px; border-radius: 50%; vertical-align: middle; }
.qq-conversion-link { display: inline-block; margin-top: 8px; color: var(--primary); }
#accountModal { z-index: 1050; }
.alipay-auth-panel { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; text-align: center; }
.alipay-auth-panel canvas { width: min(100%, 320px); height: auto; border-radius: 8px; image-rendering: pixelated; }
.alipay-auth-panel .hint { margin: 0; }
.alipay-device-fields { width: 100%; display: grid; gap: 10px; text-align: left; }
.alipay-device-list { display: grid; gap: 8px; }
.alipay-device-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); cursor: pointer; }
.alipay-device-row input { width: auto; flex-shrink: 0; }
.alipay-device-row span { min-width: 0; overflow-wrap: anywhere; }
.alipay-device-row small { display: block; margin-top: 4px; color: var(--muted); }
.role-alipay-auth { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding: 8px 10px; border-radius: 8px; background: var(--panel-soft); color: var(--muted); font-size: 12px; }
.role-alipay-auth span { min-width: 0; overflow-wrap: anywhere; }
.role-alipay-auth button { flex-shrink: 0; padding: 5px 8px; font-size: 12px; }
.role-alipay-auth.expiring { background: #fff7ed; color: #9a3412; }
.role-alipay-auth.expired { background: #fff1f2; color: #be123c; }
@media (max-width: 760px) {
    .admin-workspace { display: block; }
    .admin-nav-toggle { display: block; margin-bottom: 12px; }
    .admin-workspace .admin-section-nav { display: none; position: static; margin-bottom: 16px; }
    .admin-workspace .admin-section-nav.mobile-open { display: flex; }
    .ops-controls label { flex: 1 1 130px; }
    .ops-controls input, .ops-controls select { width: 100%; }
    .ops-role-row, .ops-event { flex-wrap: wrap; }
    .ops-role-row > div:first-child { flex-basis: 100%; }
    .ops-node { padding: 12px; }
    .ops-metrics { gap: 8px; }
    .ops-metric { padding: 10px; }
    .ops-heading { align-items: flex-start; }
}
/* War-season inventory: compact summary and details loaded only for the selected union. */
#warSeasonReviveContent .war-revive-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; }
.war-revive-selectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
#warSeasonReviveContent .war-revive-selectors select { grid-column: auto; min-width: 0; }
.war-revive-actions { display: flex; justify-content: flex-end; gap: 8px; }
.war-revive-actions button { white-space: nowrap; }
.war-revive-history { display: flex; align-items: center; justify-self: end; gap: 7px; color: var(--muted); font-size: 12px; cursor: pointer; white-space: nowrap; }
#warSeasonReviveContent .war-revive-history input { flex: 0 0 16px; width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; accent-color: var(--primary); }
.war-revive-summary { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 12px 0; font-size: 13px; }
.war-revive-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.war-revive-table th, .war-revive-table td { border-bottom: 1px solid #edf1f6; padding: 10px 12px; text-align: left; }
.war-revive-table th { color: #536b89; background: #f8fafd; font-weight: 500; }
.war-revive-sort { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.war-revive-sort span { font-size: 11px; color: #8093ab; }
.war-revive-table th[aria-sort="ascending"] .war-revive-sort,
.war-revive-table th[aria-sort="descending"] .war-revive-sort { color: #2870ca; }
.war-revive-sort:hover { color: #2870ca; background: transparent; }
.war-revive-sort:focus-visible { outline: 2px solid #2870ca; outline-offset: 3px; border-radius: 3px; }
.war-revive-table { min-width: 500px; }
.war-revive-table th:nth-child(2), .war-revive-table td:nth-child(2),
.war-revive-table th:nth-child(3), .war-revive-table td:nth-child(3),
.war-revive-table th:nth-child(4), .war-revive-table td:nth-child(4) { text-align: right; white-space: nowrap; }
#warSeasonReviveContent .union-power-panel > .hint,
#warSeasonReviveContent #warReviveMessage,
#warSeasonReviveContent #warReviveMembers { padding-inline: 12px; }
@media (max-width: 760px) {
    #warSeasonReviveContent .war-revive-toolbar { grid-template-columns: minmax(0, 1fr); }
    .war-revive-selectors { grid-template-columns: minmax(0, 1fr); }
    .war-revive-actions button { flex: 1; }
    .war-revive-history { justify-self: start; }
}
@media (max-width: 600px) {
    .war-revive-table th, .war-revive-table td { padding: 8px 6px; }
    .war-revive-table td:first-child { overflow-wrap: anywhere; }
    .war-revive-table th:last-child, .war-revive-table td:last-child { font-size: 11px; max-width: 108px; }
}

.dao-query-view { min-width: 0; }
.dao-toolbar, .dao-heading, .dao-pages { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.dao-toolbar select { width: auto; max-width: 100%; min-width: 140px; }
.dao-toolbar form { display: flex; gap: 8px; flex: 1; min-width: 180px; }
.dao-toolbar input { min-width: 0; width: 100%; }
.dao-toolbar button, .dao-pages button, .dao-heading button { white-space: nowrap; }
.dao-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr)); gap: 10px; margin: 14px 0; }
.dao-player { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 14px; text-align: left; color: var(--text, #27364b); background: var(--surface, #fff); border: 1px solid var(--border, #dbe3ee); border-radius: 12px; min-width: 0; overflow-wrap: anywhere; }
.dao-player:hover { border-color: #5289cd; background: #f4f8ff; }
.dao-player:disabled { opacity: .6; cursor: default; }
.dao-player strong { font-size: 15px; }
.dao-player span { font-size: 12px; }
.dao-player small { font-size: 11px; color: #718096; }
.dao-power { color: #3676bd; font-weight: 600; }
.dao-progress { display: flex; flex-wrap: wrap; gap: 8px; }
.dao-progress > span { padding: 7px 10px; border-radius: 8px; background: #eef5ff; color: #46678c; font-size: 12px; }
.dao-progress small { display: block; margin-top: 4px; }
.dao-pages { justify-content: center; margin: 18px 0; font-size: 12px; }
.dao-heading h3, .dao-heading p { margin: 3px 0; }
.dao-body, .dao-variant { margin: 10px 0; padding: 12px; border: 1px solid var(--border, #dbe3ee); border-radius: 12px; background: var(--surface, #fff); }
.dao-body > summary, .dao-variant > summary { cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.dao-body > summary > span, .dao-variant > summary > span { display: inline-block; margin-left: 12px; color: #718096; font-size: 12px; font-weight: 400; }
.dao-attributes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.dao-attributes > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; padding: 7px 8px; background: #f5f7fb; border-radius: 7px; font-size: 12px; overflow-wrap: anywhere; }
.dao-attributes span { color: #718096; }
.dao-more > summary { cursor: pointer; font-size: 12px; color: #567695; }
.dao-loadout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.dao-loadout > section { padding: 10px; border-radius: 9px; background: #f8faff; min-width: 0; overflow-wrap: anywhere; }
.dao-loadout h4 { margin: 0 0 8px; font-size: 13px; color: #718096; }
.dao-loadout strong, .dao-loadout span, .dao-loadout p { font-size: 12px; }
.dao-loadout div > span { margin-left: 8px; color: #718096; }
.dao-loadout p { margin: 5px 0 10px; }
.dao-loadout .dao-attributes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dao-chip { display: inline-block; margin: 3px 5px 3px 0; padding: 4px 6px; border-radius: 5px; background: #eaf0f8; }
@media (max-width: 640px) {
    .dao-toolbar select { flex: 1; }
    .dao-toolbar form { flex-basis: 100%; order: 2; }
    .dao-attributes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dao-loadout { grid-template-columns: minmax(0, 1fr); }
    .dao-body, .dao-variant { padding: 9px; }
    .dao-variant > summary > span { margin: 5px 0 0; display: block; }
}
.config-sync-targets { display: grid; gap: 8px; max-height: min(42vh, 360px); overflow-y: auto; padding: 4px; }
.config-sync-target, .config-sync-all { display: flex; align-items: center; gap: 10px; padding: 10px; cursor: pointer; }
.config-sync-target { border: 1px solid var(--line); border-radius: 10px; }
.config-sync-target input, .config-sync-all input { width: 18px; height: 18px; flex-shrink: 0; }

/* 购物页使用独立的商店导航和商品货架。 */
.config-expand-control[hidden] { display: none; }
.shop-workspace { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; align-items: start; }
.shop-nav { display: grid; gap: 6px; padding: 12px 8px; border: 1px solid var(--surface-line); border-radius: 12px; background: #f7f9fc; }
.shop-nav-caption { padding: 2px 10px 10px; font-size: 11px; color: #8492a5; letter-spacing: .06em; }
.shop-nav-item { display: grid; gap: 6px; width: 100%; min-width: 0; padding: 12px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #54667d; text-align: left; }
.shop-nav-item > span { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.shop-nav-item small { font-size: 11px; font-weight: 400; color: #8795a7; }
.shop-nav-item:hover { background: #edf2f8; }
.shop-nav-item.active { background: #fff; border-color: #dbe6f5; color: #2563a7; box-shadow: 0 3px 9px #28456909; }
.shop-nav-item.active small { color: #537eaf; }
.shop-nav-gifts { margin-top: 6px; border-top-color: #e4eaf2; }
#configView .shop-panel { min-width: 0; border-radius: 12px; background: #fff; }
.shop-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid #edf1f6; }
.shop-heading > div { min-width: 0; }
.shop-heading h3 { margin: 0 0 8px; color: #2b405b; font-size: 18px; }
.shop-heading p { margin: 0; font-size: 12px; line-height: 1.7; color: #7b899d; }
.shop-selection-total { flex-shrink: 0; padding: 5px 10px; border-radius: 6px; background: #eff5fc; color: #4677ad; font-size: 12px; white-space: nowrap; }
#configView .shop-content { display: block; padding: 18px 22px 22px; }
.shop-products { min-width: 0; }
.shop-tools { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.shop-search { position: relative; display: flex; align-items: center; flex: 1; max-width: 340px; min-width: 0; }
.shop-search input { width: 100%; min-width: 0; min-height: 38px; padding-left: 36px; border-radius: 8px; font-size: 13px; background: #f9fbfd; }
.shop-selected-filter { flex-shrink: 0; padding: 9px 12px; min-height: 38px; border: 1px solid #dfe6ef; border-radius: 8px; color: #73829a; background: #fff; font-size: 12px; }
.shop-selected-filter.active { border-color: #9dbde4; background: #f0f6ff; color: #2865ab; }
.shop-selected-filter:hover { border-color: #a8bfdc; background: #f0f6ff; color: #2865ab; }
.shop-categories { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 0 4px; }
.shop-category { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; min-height: 34px; border: 0; border-radius: 7px; color: #6d7d93; background: #f4f6f9; font-size: 12px; }
.shop-category > span { font-size: 10px; opacity: .7; }
.shop-category.active { color: #2865ab; background: #eaf2fd; font-weight: 600; }
.shop-category:hover { color: #2865ab; background: #eaf2fd; }
.shop-product-groups { display: grid; gap: 16px; padding-top: 14px; }
.shop-group-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.shop-group-heading h4 { display: flex; align-items: center; gap: 8px; margin: 0; color: #546980; font-size: 13px; font-weight: 600; }
.shop-group-heading h4::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: #a8bfdc; }
.shop-group-heading > span { font-size: 11px; color: #8a99ad; }
.shop-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.shop-product-card { position: relative; min-width: 0; }
.shop-product { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 7px; align-content: start; width: 100%; height: 100%; min-width: 0; padding: 10px; border: 1px solid #e4eaf2; border-radius: 8px; text-align: left; color: #3a4e68; background: #fff; transition: border-color 120ms ease, background 120ms ease; }
.shop-product:hover { border-color: #a4bfdc; background: #fbfdff; }
.shop-product.selected { border-color: #98b8df; background: #f6faff; }
.shop-product-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-width: 0; padding-right: 20px; }
.shop-product-title strong { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.shop-product-quantity { font-size: 11px; color: #91a0b1; }
.shop-product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; padding-right: 20px; color: #476d9b; font-size: 15px; font-weight: 650; }
.shop-product-price small { color: #8a98aa; font-size: 11px; font-weight: 400; }
.shop-product-price.free { color: #37927b; font-size: 14px; }
.shop-product-check { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1px solid #cdd8e6; border-radius: 4px; background: #fff; }
.shop-product.selected .shop-product-check { background: #4b7db7; border-color: #4b7db7; }
.shop-product.selected .shop-product-check::after { content: ""; width: 7px; height: 4px; border: solid #fff; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg) translateY(-1px); }
.shop-product:disabled { opacity: .55; cursor: not-allowed; }
.shop-product-help > summary { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 26px; height: 26px; list-style: none; color: #8b9bb0; cursor: pointer; border-radius: 5px; }
.shop-product-help > summary::-webkit-details-marker { display: none; }
.shop-product-help > summary > span { display: grid; place-items: center; width: 14px; height: 14px; border: 1px solid #bdcbdc; border-radius: 50%; font: 600 10px/1 sans-serif; }
.shop-product-help > summary:hover, .shop-product-help[open] > summary { color: #376eaf; background: #eaf2fd; }
.shop-product-hint { position: absolute; z-index: 20; left: 0; right: 0; bottom: calc(100% + 5px); display: grid; gap: 5px; padding: 10px; border: 1px solid #dce6f2; border-radius: 8px; color: #6d8199; background: #fff; box-shadow: 0 5px 18px #29466d24; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.shop-product-hint strong { font-size: 12px; color: #3a4e68; font-weight: 600; }
.shop-product-help > summary:focus-visible { outline: 2px solid #6797d3; outline-offset: 1px; }
.shop-workspace button:focus-visible { outline: 2px solid #6797d3; outline-offset: 2px; }
.shop-empty { padding: 35px 10px; text-align: center; font-size: 13px; color: #8a99ab; line-height: 1.7; }
.shop-product-card[hidden], .shop-product[hidden], .shop-product-group[hidden], .shop-empty[hidden] { display: none; }

.alliance-view { min-width: 0; }
.alliance-tool { padding: 22px; border: 1px solid var(--surface-line); border-radius: 14px; background: var(--surface, #fff); }
.alliance-header, .alliance-section-title { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.alliance-header { align-items: flex-start; margin-bottom: 20px; }
.alliance-header h3 { margin: 4px 0 8px; font-size: 22px; color: #2c425e; overflow-wrap: anywhere; }
.alliance-header .eyebrow { margin: 0; font-size: 11px; color: #8a9bb0; }
.alliance-header .hint { margin: 0; }
.alliance-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.alliance-tool button, .alliance-review-card button { min-height: 34px; font-size: 12px; }
.alliance-list-search, .alliance-picker-toolbar { display: flex; gap: 8px; margin: 12px 0; }
.alliance-list-search input, .alliance-picker-toolbar input, .alliance-review-actions input { flex: 1; min-width: 0; }
.alliance-tool input, .alliance-tool select, .alliance-tool textarea, .alliance-review-actions input { font-size: 13px; border-radius: 8px; }
.alliance-picker-toolbar select { width: auto; max-width: 92px; }
.alliance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 16px 0; }
.alliance-card { display: grid; gap: 7px; padding: 17px; border: 1px solid #e2e9f2; border-radius: 11px; text-align: left; background: linear-gradient(135deg, #fff, #f8fafd); color: #425772; transition: border-color .15s; }
.alliance-card:hover { border-color: #94b3d9; }
.alliance-card > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.alliance-card strong { font-size: 16px; overflow-wrap: anywhere; }
.alliance-card p { margin: 1px 0 7px; font-size: 12px; color: #70829a; }
.alliance-card small { color: #8997a9; font-size: 11px; }
.alliance-card b { font-size: 20px; font-weight: 600; color: #436c9c; }
.alliance-card-arrow { font-size: 23px; color: #9caec2; }
.alliance-badge { display: inline-flex; align-items: center; width: max-content; padding: 3px 7px; border-radius: 6px; font-size: 11px; font-weight: 500; white-space: nowrap; background: #eef3f8; color: #617b9a; }
.alliance-badge.pending { background: #fff5df; color: #a57b2c; }
.alliance-badge.approved { background: #edf6f1; color: #49856a; }
.alliance-badge.rejected { background: #f9eff0; color: #a96670; }
.alliance-overview { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; padding: 17px 18px; margin-bottom: 16px; background: #f7f9fc; border-radius: 10px; }
.alliance-overview > div { display: grid; gap: 6px; }
.alliance-overview small { color: #8595a8; font-size: 11px; }
.alliance-overview strong { color: #3c5f8a; font-size: 20px; }
.alliance-unions { display: grid; gap: 8px; }
.alliance-union { display: grid; grid-template-columns: minmax(120px, 1.5fr) minmax(70px, 1fr) minmax(80px, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 1px solid #e8edf4; border-radius: 9px; font-size: 13px; color: #445c79; }
.alliance-union-name, .alliance-union-master, .alliance-union-power { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.alliance-union-name strong { font-weight: 600; }
.alliance-union small { color: #8a99ac; font-size: 11px; }
.alliance-union-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.alliance-submit-panel { display: grid; gap: 10px; padding: 18px; margin: 16px 0; border: 1px solid #dbe6f4; border-radius: 11px; background: #fbfcff; }
.alliance-section-title h4 { margin: 0; font-size: 15px; color: #39577c; }
.alliance-submit-panel > label { display: grid; gap: 8px; font-size: 12px; color: #71839b; }
.alliance-submit-panel .hint { margin: 0; font-size: 11px; }
.alliance-submit-panel > button { justify-self: end; }
.alliance-picker-results { display: grid; gap: 7px; max-height: 360px; overflow: auto; overscroll-behavior: contain; }
.alliance-selected { display: flex; flex-wrap: wrap; gap: 6px; }
.alliance-selected button { padding: 5px 8px; min-height: 29px; background: #eef4fc; color: #4d719d; border: 1px solid #dce7f5; }
.alliance-selected span { margin-left: 6px; }
.alliance-submit-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.alliance-submit-footer button { flex-shrink: 0; }
.alliance-pagination { display: flex; align-items: center; gap: 7px; margin-top: 18px; }
.alliance-pagination span { flex: 1; color: #8b99ac; font-size: 12px; }
.alliance-history { margin-top: 20px; border-top: 1px solid #edf0f5; padding-top: 14px; font-size: 12px; color: #71839b; }
.alliance-history > summary { cursor: pointer; padding: 5px 0; }
.alliance-history article { padding: 12px 0; border-bottom: 1px solid #edf0f5; }
.alliance-history article p { margin: 7px 0; overflow-wrap: anywhere; }
.alliance-error { padding: 10px 12px; border-radius: 8px; background: #fff2f1; color: #a55d59; font-size: 12px; }
.alliance-review-card { padding: 16px; margin-top: 12px; border: 1px solid #e2e9f3; border-radius: 11px; }
.alliance-review-card .alliance-section-title > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.alliance-review-card .alliance-section-title span { font-size: 12px; color: #7c8da3; }
.alliance-review-unions { display: grid; gap: 6px; max-height: 370px; overflow: auto; }
.alliance-review-unions .alliance-union { grid-template-columns: minmax(120px, 1.5fr) minmax(70px, 1fr) minmax(80px, 1fr); }
.alliance-review-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
@media (max-width: 760px) {
    .alliance-tool { padding: 15px; }
    .alliance-header { flex-direction: column; gap: 12px; }
    .alliance-header-actions { justify-content: flex-start; }
    .alliance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .alliance-card { padding: 12px; }
    .alliance-card strong { font-size: 14px; }
    .alliance-card b { font-size: 16px; }
    .alliance-union, .alliance-review-unions .alliance-union { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .alliance-union-name { grid-column: 1 / -1; }
    .alliance-union-actions, .alliance-picker-results .alliance-union > button { grid-column: 1 / -1; justify-self: start; }
    .alliance-submit-panel { padding: 12px; }
    .alliance-submit-footer { flex-direction: column; align-items: flex-start; }
    .alliance-submit-footer button { align-self: flex-end; }
    .alliance-review-actions { flex-wrap: wrap; }
    .alliance-review-actions input { flex-basis: 100%; }
}
@media (max-width: 760px) {
    .shop-workspace { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .shop-nav { display: flex; overflow-x: auto; gap: 6px; padding: 6px; scrollbar-width: thin; }
    .shop-nav-caption { display: none; }
    .shop-nav-item { flex: 0 0 auto; width: auto; gap: 5px; padding: 10px 12px; text-align: center; }
    .shop-nav-item > span { white-space: nowrap; }
    .shop-nav-item small { font-size: 10px; }
    .shop-nav-gifts { margin-top: 0; margin-left: 4px; border-top-color: transparent; border-left-color: #e4eaf2; }
    .shop-heading { padding: 16px; gap: 10px; }
    .shop-heading h3 { font-size: 16px; }
    #configView .shop-content { padding: 14px 16px 18px; }
    .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .shop-product { padding: 9px; gap: 6px; }
    .shop-product-title strong { font-size: 12px; }
    .shop-category { padding-inline: 8px; }
}
@media (max-width: 360px) {
    .shop-heading { padding: 12px; }
    #configView .shop-content { padding: 12px; }
    .shop-product { padding: 8px; }
    .shop-selection-total { padding: 4px 7px; }
}
.config-sync-target span { min-width: 0; overflow-wrap: anywhere; }
.config-sync-target small { display: block; opacity: .65; margin-top: 3px; }