/* 跨页面复用的版式：PageHero 首屏、卡片容器、正文表格。 */

.hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: radial-gradient(1100px 480px at 88% -12%, rgba(0, 152, 220, 0.28), transparent 62%), radial-gradient(900px 420px at 6% 112%, rgba(191, 215, 50, 0.16), transparent 60%), linear-gradient(135deg, #14161c 0%, #1a1e26 100%);
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 28%;
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(16, 18, 22, 0.94) 0%, rgba(16, 18, 22, 0.82) 45%, rgba(16, 18, 22, 0.42) 100%);
}

.hero-grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(720px 400px at 70% 30%, #000 0%, transparent 75%);
}

/* 右侧的 LOGO 水印。左端用 mask 淡出，避免和标题文字打架。
   按高度完整容纳而不是出血裁切：两个记事社的 LOGO 都是多行锁定组合，一裁副行就成了残字。
   0.18 是配合 hero-panel 右上角那层蓝色径向光定的，纯底色上会显得偏重。 */
.hero-watermark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    background-size: auto 78%;
    opacity: 0.18;
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 85%);
    mask-image: linear-gradient(90deg, transparent 30%, #000 85%);
}

@media (max-width: 599px) {
    /* 窄屏文字会占满整宽，水印再淡一档。 */
    .hero-watermark {
        opacity: 0.1;
    }
}

.section-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    border: 1px solid transparent;
}

    .section-card:hover {
        transform: translateY(-3px);
        border-color: rgba(0, 152, 220, 0.45);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    }

.stat-card {
    height: 100%;
    border-left: 3px solid var(--mud-palette-primary);
}

/* 强调条：跟随主题色变量，浅色/深色模式下自动适配。 */
.mud-paper.highlight-panel {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.1);
    border: 1px solid rgba(var(--mud-palette-warning-rgb), 0.28);
}

/* FactTable 与 MonsterSiren 都在用，两个组件共享，留在全局。 */
.logo-preview {
    max-width: 100%;
    max-height: 10rem;
    width: auto;
    height: auto;
    display: block;
}