:root {
    --ui-bg: #f5f7fb;
    --ui-card: #ffffff;
    --ui-text: #172033;
    --ui-muted: #667085;
    --ui-line: #e4eaf2;
    --ui-soft: #f8fafc;
    --ui-primary: #246bfe;
    --ui-primary-dark: #1e55d6;
    --ui-primary-weak: #edf4ff;
    --ui-green: #13a37b;
    --ui-red: #dc2626;
    --ui-shadow: 0 10px 24px rgba(21, 34, 66, .08);
    --ui-shadow-soft: 0 4px 14px rgba(21, 34, 66, .06);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    background: var(--ui-bg) !important;
}

body {
    margin: 0;
    color: var(--ui-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
    letter-spacing: 0 !important;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font-family: inherit !important;
    letter-spacing: 0 !important;
}

.page {
    width: min(760px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hero {
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 26px rgba(21, 34, 66, .08);
}

.hero::before,
.hero::after {
    opacity: .22;
}

.panel,
.menu,
.notice,
.activity-card,
.quick-item,
.quick-btn,
.action-card,
.record-list,
.sign-card,
.form-card,
.card,
.list,
.section-card,
.profile-card,
.result-item,
.policy-item,
.sample-box {
    border: 1px solid rgba(228, 234, 242, .92) !important;
    border-radius: 8px !important;
    background: var(--ui-card) !important;
    box-shadow: var(--ui-shadow) !important;
}

.panel,
.activity-card,
.record-list,
.menu {
    overflow: hidden;
}

.topbar {
    border-bottom: 1px solid var(--ui-line) !important;
    background: rgba(245, 247, 251, .94) !important;
    box-shadow: 0 6px 16px rgba(21, 34, 66, .05);
}

.section-title,
.field-label,
.menu-title,
.action-title,
.record-title,
.rule-title,
.activity-name,
.title,
.page-title,
.hero-title {
    letter-spacing: 0 !important;
}

.menu-sub,
.action-sub,
.help,
.rule-text,
.record-meta,
.policy-label,
.section-link,
.subtitle,
.tip,
.empty-tip {
    color: var(--ui-muted) !important;
}

.notice-icon,
.quick-icon,
.menu-icon,
.action-icon,
.activity-logo,
.q-icon {
    border-radius: 8px !important;
}

.notice-icon,
.quick-icon,
.menu-icon {
    background: var(--ui-primary-weak) !important;
    color: var(--ui-primary) !important;
}

.action-icon,
.activity-logo {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-green)) !important;
    color: #fff !important;
}

.green .action-icon {
    background: var(--ui-green) !important;
}

.primary-actions,
.quick-grid,
.quick-btns,
.policy-grid,
.stats,
.hero-metrics,
.actions {
    gap: 10px !important;
}

.menu-row,
.record-item,
.activity-head {
    border-color: var(--ui-line) !important;
}

.menu-row,
.quick-item,
.quick-btn,
.action-card,
.notice,
.apply-btn,
.btn,
.submit,
.sign-btn,
.copy-btn,
.code-btn {
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}

.menu-row:active,
.quick-item:active,
.quick-btn:active,
.action-card:active,
.notice:active {
    transform: translateY(1px);
}

.layui-input,
.layui-textarea,
.input,
.textarea,
.sign-input,
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea {
    border-radius: 8px !important;
    border-color: #d8e1ee !important;
    background: #fbfdff !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}

.layui-input:focus,
.layui-textarea:focus,
.input:focus,
.textarea:focus,
.sign-input:focus,
input:focus,
textarea:focus {
    border-color: rgba(36, 107, 254, .62) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(36, 107, 254, .10) !important;
    outline: none !important;
}

.layui-btn,
.btn,
.submit,
.apply-btn,
.logout,
.sign-btn,
.code-btn,
.copy-btn {
    border-radius: 8px !important;
    font-weight: 800 !important;
}

.btn-primary,
.submit,
.apply-btn,
.sign-btn.primary {
    border-color: var(--ui-primary) !important;
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-dark)) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(36, 107, 254, .18) !important;
}

.btn-ghost,
.sign-btn.secondary,
.code-btn,
.copy-btn {
    border: 1px solid rgba(36, 107, 254, .18) !important;
    background: var(--ui-primary-weak) !important;
    color: var(--ui-primary) !important;
}

.record-tabs,
.tabs {
    border: 1px solid var(--ui-line) !important;
    border-radius: 8px !important;
    background: #eef2f7 !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

.record-tab,
.tab {
    border-radius: 6px !important;
}

.record-tab.active,
.tab.active {
    color: var(--ui-primary) !important;
    background: #ffffff !important;
    box-shadow: 0 6px 16px rgba(36, 107, 254, .12) !important;
}

.record-tab.active::after {
    background: var(--ui-primary) !important;
}

.badge.success,
.notice-tag.unread {
    background: #e8f8f2 !important;
    color: var(--ui-green) !important;
}

.badge.fail {
    background: #fff1f2 !important;
    color: var(--ui-red) !important;
}

.notice-tag.hot {
    background: #fff6e5 !important;
    color: #c47a00 !important;
}

.notice-tag,
.menu-badge,
.rule-tag {
    border-radius: 6px !important;
    background: var(--ui-primary-weak) !important;
    color: var(--ui-primary) !important;
}

.command,
.wrapped-command,
.policy-item,
.sample-box {
    background: var(--ui-soft) !important;
}

.logout {
    border: 1px solid rgba(255, 255, 255, .26) !important;
    background: rgba(255, 255, 255, .18) !important;
    color: #ffffff !important;
    backdrop-filter: blur(10px);
}

.layui-layer {
    border-radius: 8px !important;
    overflow: hidden;
}

.layui-layer-title {
    border-bottom-color: var(--ui-line) !important;
    background: #ffffff !important;
    color: var(--ui-text) !important;
    font-weight: 800 !important;
}

.layui-layer-btn a {
    border-radius: 8px !important;
}
