:root {
    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);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    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-captcha-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}

.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;
}

.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;
}

.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 {
    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-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-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: 20px;
    z-index: 20;
    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);
}

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

.toast.config-save {
    top: max(16px, env(safe-area-inset-top));
    right: auto;
    bottom: auto;
    left: 50%;
    z-index: 310;
    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);
}

.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;
}

.tutorial-fab {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-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(max(20px, env(safe-area-inset-bottom)) + 56px);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    width: min(560px, calc(100vw - 40px));
    height: min(620px, calc(100dvh - 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: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 20px;
    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);
}

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

.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;
}

.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;
}

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

.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;
    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;
}

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

.user-trigger {
    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 {
    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;
    }

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

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

    .mobile-menu-button {
        width: 42px;
        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: 0;
        right: 0;
        display: grid;
        width: min(310px, 86vw);
        height: 100vh;
        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;
}

.profile-community {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.profile-community strong {
    color: var(--text);
    font-weight: 700;
}

.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: 0;
    }

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

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

    .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);
    }

    .modal-backdrop {
        padding: 10px;
    }
}

/* 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: 82px; }
#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(12px + env(safe-area-inset-bottom, 0px)); 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-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"], .has-query) { background: #edf4ff; color: #2567b8; }
.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; }
.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[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-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-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-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-plot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .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 .log-layout { height: calc(100vh - 180px); height: calc(100dvh - 180px); min-height: 240px; border-top: 0; grid-template-rows: minmax(0, 1fr); }
.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-action { flex-direction: row; gap: 5px; width: auto; height: 32px; min-height: 32px; padding: 0 8px; border-radius: 6px; font-size: 12px; }
#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(100dvh - 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 .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 { 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 { padding: 10px 12px 12px; gap: 8px; }
#configView .config-field { padding: 8px 10px; border-color: #eaf0f6; background: #f8fafc; border-radius: 8px; min-height: 0; gap: 6px; }
#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.field-boolean { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
#configView .config-field:is(.field-number, .field-durationMinutes, .field-time) { grid-template-columns: minmax(0, 1fr) 120px; align-items: center; }
#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 .config-field.field-select { grid-template-columns: minmax(0, 1fr) minmax(90px, 48%); align-items: center; }
#configView .field-select > select { width: 100%; }
#configView .config-field:is(.field-option, .field-multiOption) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#configView .config-field:is(.field-option, .field-multiOption) > .choice-row { min-width: 0; flex: 0 1 auto; }
#configView .number-wrap { min-width: 0; }
#configView .number-wrap input { width: 100%; }
#configView .number-wrap > span { white-space: nowrap; flex-shrink: 0; }
#configView .choice-row { gap: 4px; }
#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-row { grid-template-columns: 74px minmax(0, 1fr); }
#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: 12px; 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; }
@media (min-width: 1200px) {
    #configView .config-section-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    #configView .config-section.expanded, #configView .config-search-empty { grid-column: 1 / -1; }
}
@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: 12px; }
    .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; }
    #dashboardView .log-layout { height: calc(100vh - 190px); height: calc(100dvh - 190px); }
    #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 .battle-preset-row { gap: 8px; }
    #configView .config-save-bar { bottom: 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: 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 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-empty { padding: 18px; color: var(--muted); font-size: 13px; }
.power-monitor-reminder { position: fixed; bottom: 18px; left: 18px; 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: 12px; left: 12px; 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; }
#accountModal { z-index: 1050; }
#accountModal > .modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
.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. */
.war-revive-toolbar { gap: 10px; flex-wrap: wrap; }
.war-revive-toolbar select { min-width: 150px; max-width: 100%; }
.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%; font-size: 13px; }
.war-revive-table th, .war-revive-table td { padding: 10px 12px; text-align: left; }
.war-revive-table th:nth-child(2), .war-revive-table td:nth-child(2) { text-align: right; }
#warSeasonReviveContent .union-power-panel > .hint,
#warSeasonReviveContent #warReviveMessage,
#warSeasonReviveContent #warReviveMembers { padding-inline: 12px; }
@media (max-width: 600px) {
    .war-revive-toolbar select, .war-revive-toolbar input { width: 100%; min-width: 0; }
    .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; }
}