:root {
    --sidebar: #f5f7fa;
    --sidebar-dark: #eaf3ff;
    --active: #eaf3ff;
    --page: #f6f8fb;
    --panel: #ffffff;
    --border: #dbe3ef;
    --text: #0f172a;
    --muted: #64748b;
    --blue: #2563eb;
    --cyan: #0ea5e9;
    --green: #059669;
    --red: #ef4444;
    --orange: #f59e0b;
}

body {
    margin: 0 !important;
    background: var(--page) !important;
    color: var(--text) !important;
    font-family: Arial, "Microsoft YaHei", sans-serif !important;
    font-size: 13px !important;
}

.layout {
    display: flex !important;
    min-height: 100vh !important;
}

.main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.menu {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.sidebar {
    width: 160px !important;
    flex: 0 0 160px !important;
    padding-top: 6px !important;
    background: var(--sidebar) !important;
    border-right: 1px solid var(--border) !important;
}

.sidebar-title {
    padding: 12px 10px 8px !important;
    color: #6b7280 !important;
    font-size: 10px !important;
    text-align: center !important;
}

.menu a {
    display: block !important;
    min-height: 30px !important;
    margin: 3px 6px !important;
    padding: 6px 10px !important;
    color: #111827 !important;
    border: 1px solid transparent !important;
    border-radius: 5px !important;
    font-weight: 700 !important;
}

.menu a:hover,
.menu a.active {
    background: var(--active) !important;
    color: #0d6efd !important;
    border-color: #b7d6ff !important;
}

.menu .icon {
    display: none !important;
}

.content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 28px 24px !important;
}

/* Settings is form-oriented; keep its fields readable on wide monitors. */
.settings-content {
    max-width: 1180px !important;
}

.content-header,
.title-row,
.page-head,
.collect-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.title-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.title-icon {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 6px !important;
    background: var(--blue) !important;
    color: #fff !important;
    font-weight: 900 !important;
}

h1,
.page-title {
    margin: 0 !important;
    color: var(--text) !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

.subtitle {
    margin: 4px 0 0 !important;
    color: var(--muted) !important;
    font-size: 13px !important;
}

.button,
.btn,
.action-button,
.panel-link,
.portal-button,
.edit-button,
.login-button,
.sync-button,
.delete-button {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 12px !important;
    border-radius: 7px !important;
    font: inherit !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.button,
.btn,
.action-button,
.panel-link {
    border: 1px solid var(--border) !important;
    background: #fff !important;
    color: #0f172a !important;
}

.button.sync,
.btn.primary,
.btn.blue,
.sync-button {
    border-color: #111827 !important;
    background: #111827 !important;
    color: #fff !important;
}

.delete-button,
.btn.danger {
    border-color: var(--red) !important;
    background: var(--red) !important;
    color: #fff !important;
}

.panel,
.work-panel,
.mini-panel,
.wide-panel,
.notice-panel,
.store-summary {
    overflow: hidden !important;
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
}

.panel-head,
.panel-title {
    color: #0f172a !important;
    font-weight: 900 !important;
}

table {
    width: 100% !important;
    border-collapse: collapse !important;
}

th,
td {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--border) !important;
    text-align: left !important;
    vertical-align: middle !important;
}

th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

tbody tr:nth-child(odd) {
    background: #fbfdff;
}

tbody tr:hover {
    background: #f1f7ff !important;
}

.message,
.proxy-status,
.collector-runtime,
.notice {
    border-radius: 6px !important;
    font-weight: 800 !important;
}

input,
select,
textarea {
    border: 1px solid var(--border) !important;
    border-radius: 7px !important;
    font: inherit !important;
}

.badge,
.status {
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

@media (max-width: 980px) {
    .layout {
        display: block !important;
    }

    .sidebar {
        width: 100% !important;
    }

    .content-header,
    .title-row,
    .page-head,
    .collect-head {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .panel,
    .work-panel {
        overflow-x: auto !important;
    }
}