/*!
 * 阿若防红系统 - 全站主题增强样式
 * 仅视觉增强，不改变任何结构与功能
 */

/* ---------- 基础体验 ---------- */
html body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(22, 93, 255, 0.18);
    color: #0E42D2;
}

/* ---------- 页面背景（柔和双光晕，仅用户中心） ---------- */
html.aru-user body {
    background-color: #eef2f9;
    background-image:
        radial-gradient(ellipse 70% 320px at 50% -80px, rgba(22, 93, 255, 0.10), transparent),
        radial-gradient(600px 320px at 92% 12%, rgba(54, 207, 201, 0.08), transparent),
        radial-gradient(560px 300px at 6% 85%, rgba(124, 58, 237, 0.06), transparent);
    background-attachment: fixed;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cdd6e4;
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a9b8cf;
}

/* ---------- 顶部导航 ---------- */
nav.bg-white.shadow-sm.sticky {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(22, 93, 255, 0.06);
}

/* ---------- 侧边栏 ---------- */
aside.sidebar {
    border-right: 1px solid #eef0f5;
    box-shadow: 0 0 24px rgba(15, 23, 42, 0.04);
    scrollbar-width: thin;
}

aside.sidebar .sidebar-link {
    position: relative;
    border-radius: 10px;
    color: #4b5563;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

aside.sidebar .sidebar-link i {
    transition: color 0.18s ease, transform 0.18s ease;
}

aside.sidebar .sidebar-link:hover {
    background: linear-gradient(90deg, rgba(22, 93, 255, 0.10), rgba(22, 93, 255, 0.03)) !important;
    color: #165DFF !important;
    transform: translateX(3px);
}

aside.sidebar .sidebar-link:hover i {
    color: #165DFF;
}

aside.sidebar .sidebar-link.active {
    background: linear-gradient(90deg, rgba(22, 93, 255, 0.13), rgba(22, 93, 255, 0.04)) !important;
    color: #165DFF !important;
    border-right: none !important;
    font-weight: 600;
}

aside.sidebar .sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 3.5px;
    height: 58%;
    min-height: 16px;
    border-radius: 3px;
    background: linear-gradient(180deg, #4080FF, #165DFF);
    box-shadow: 0 1px 6px rgba(22, 93, 255, 0.5);
}

aside.sidebar .sidebar-link.active i {
    color: #165DFF;
}

/* ---------- 用户信息渐变卡 ---------- */
.bg-gradient-to-r.from-primary.to-primary-dark {
    background-image: linear-gradient(120deg, #165DFF 0%, #3B7CFF 48%, #6D5BFF 100%) !important;
    box-shadow: 0 14px 34px -12px rgba(22, 93, 255, 0.55);
    position: relative;
    overflow: hidden;
}

.bg-gradient-to-r.from-primary.to-primary-dark::after {
    content: '';
    position: absolute;
    top: -70%;
    right: -12%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.20), transparent 62%);
    pointer-events: none;
}

/* ---------- 统计卡片 ---------- */
.stat-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #165DFF, #36CFC9);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(22, 93, 255, 0.18) !important;
    box-shadow: 0 16px 32px -10px rgba(22, 93, 255, 0.20) !important;
}

.stat-card:hover::before {
    opacity: 1;
}

/* ---------- 内容区块卡片 ---------- */
main .bg-white.rounded-xl.shadow-sm.border {
    border-radius: 16px !important;
    border-color: #eef1f6 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
    transition: box-shadow 0.25s ease;
}

/* ---------- 主按钮 ---------- */
.btn-primary {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(135deg, #165DFF, #4080FF) !important;
    box-shadow: 0 8px 18px -6px rgba(22, 93, 255, 0.55) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.07);
    box-shadow: 0 12px 24px -6px rgba(22, 93, 255, 0.60) !important;
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0) scale(0.985);
}

.btn-primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    animation: aru-shimmer 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes aru-shimmer {
    0% { left: -70%; }
    55% { left: 130%; }
    100% { left: 130%; }
}

/* ---------- 表单控件 ---------- */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #4080FF !important;
    box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.13) !important;
    outline: none;
}

/* ---------- 表格 ---------- */
main table {
    border-collapse: separate;
    border-spacing: 0;
}

main table thead th {
    background: #f7f9fd;
    color: #5b6472;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border-bottom: 1px solid #e9edf4;
}

main table tbody tr {
    transition: background 0.15s ease;
}

main table tbody tr:hover {
    background: rgba(22, 93, 255, 0.03);
}

/* ---------- 弹窗 ---------- */
.modal-content {
    animation: aru-pop 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes aru-pop {
    from {
        opacity: 0;
        transform: translate(-50%, -47%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ---------- 移动端卡片 ---------- */
.mobile-card {
    border-radius: 14px;
    border: 1px solid #eef1f6;
    background: #fff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
}

/* ---------- 入场动画 ---------- */
main > * {
    animation: aru-rise 0.45s ease both;
}

main > *:nth-child(1) { animation-delay: 0.02s; }
main > *:nth-child(2) { animation-delay: 0.07s; }
main > *:nth-child(3) { animation-delay: 0.12s; }
main > *:nth-child(4) { animation-delay: 0.17s; }
main > *:nth-child(5) { animation-delay: 0.22s; }
main > *:nth-child(n+6) { animation-delay: 0.26s; }

@keyframes aru-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    main > *,
    .btn-primary::after {
        animation: none !important;
    }
}