<?php
if (!function_exists('dashboardIconSvg')) {
    function dashboardIconSvg($name)
    {
        $icons = [
            'desktop' => '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="5" width="17" height="11" rx="2"/><path d="M9 19h6M12 16v3"/></svg>',
            'mobile' => '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="3.5" width="10" height="17" rx="2.5"/><path d="M11 17.5h2"/></svg>',
            'article' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4.5h7l4 4V19a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 19V6A1.5 1.5 0 0 1 7.5 4.5Z"/><path d="M14 4.5V9h4"/><path d="M9 12h6M9 15h6M9 18h4"/></svg>',
            'product' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m3.5 7.5 8.5-4 8.5 4v9l-8.5 4-8.5-4z"/><path d="M12 20.5v-9"/><path d="m3.5 7.5 8.5 4 8.5-4"/></svg>',
            'upload' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 16V5"/><path d="m7.5 9.5 4.5-4.5 4.5 4.5"/><path d="M5 18.5h14"/></svg>',
            'member' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17.5 20v-1.4A3.6 3.6 0 0 0 13.9 15H8.1a3.6 3.6 0 0 0-3.6 3.6V20"/><circle cx="11" cy="8" r="3.5"/><path d="M18 8.2a2.8 2.8 0 0 1 0 5.5"/></svg>',
            'seo' => '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="10.5" cy="10.5" r="5.5"/><path d="m15 15 5 5"/><path d="M10.5 7.8v5.4M7.8 10.5h5.4"/></svg>',
            'search' => '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>',
            'knowledge' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 4.5h8a4 4 0 0 1 4 4v10a1 1 0 0 1-1.5.86L12 16.5l-4.5 2.86A1 1 0 0 1 6 18.5z"/></svg>',
            'form' => '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="4.5" width="14" height="15" rx="2"/><path d="M8.5 9.5h7M8.5 13h7M8.5 16.5h4"/></svg>',
            'payment' => '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2"/><path d="M3.5 10h17"/><path d="M8 14h3"/></svg>',
            'order' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.5 4.5h11A1.5 1.5 0 0 1 19 6v14l-2.5-1.5L14 20l-2.5-1.5L9 20l-2.5-1.5L4 20V6a1.5 1.5 0 0 1 1.5-1.5Z"/><path d="M8 9h8M8 12.5h8M8 16h5"/></svg>',
            'template' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 4.5h13A1.5 1.5 0 0 1 20 6v12a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18V6a1.5 1.5 0 0 1 1.5-1.5Z"/><path d="M4 9.5h16M9 9.5v10"/></svg>',
            'help' => '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M9.7 9.3a2.6 2.6 0 0 1 4.9 1.1c0 2-2.1 2.3-2.6 3.8"/><path d="M12 17h.01"/></svg>',
            'service' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 15.5v-3a7 7 0 1 1 14 0v3"/><rect x="3.5" y="14" width="4" height="5.5" rx="1.5"/><rect x="16.5" y="14" width="4" height="5.5" rx="1.5"/></svg>',
            'notice' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 8a6 6 0 1 0-12 0c0 6-2.5 7-2.5 7h17S18 14 18 8"/><path d="M10 19a2 2 0 0 0 4 0"/></svg>',
            'domain' => '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M3.8 12h16.4M12 3.8a14.7 14.7 0 0 1 0 16.4M12 3.8a14.7 14.7 0 0 0 0 16.4"/></svg>',
            'quality' => '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="3.5" width="14" height="17" rx="2"/><path d="M9 3.5V2h6v1.5M8.5 9.5l1.5 1.5 3-3M14.5 10h2M8.5 15.5l1.5 1.5 3-3M14.5 16h2"/></svg>',
        ];

        return isset($icons[$name]) ? $icons[$name] : $icons['article'];
    }
}

$licenseInfo = $license->getStatus();
$levelNames = [0 => '体验版', 1 => '免费版', 2 => '基础版', 3 => '专业版'];
$currentLevel = intval($licenseInfo['level'] ?? 0);
$systemVersion = \Core\Lib\License::VERSION;

$siteConfig = [];
$configs = $db->fetchAll("SELECT config_key, config_value FROM {$db->table('config')}");
foreach ($configs as $cfg) {
    $siteConfig[$cfg['config_key']] = $cfg['config_value'];
}

$siteUrl = rtrim($siteConfig['site_url'] ?? ('http://' . ($_SERVER['HTTP_HOST'] ?? 'localhost')), '/');
$siteHost = parse_url($siteUrl, PHP_URL_HOST);
$siteHost = $siteHost ? $siteHost : ($_SERVER['HTTP_HOST'] ?? 'localhost');
$siteName = trim($siteConfig['site_name'] ?? '') !== '' ? trim($siteConfig['site_name']) : 'EnterpriseCMS';
$licenseCenterBase = rtrim((string) (defined('LICENSE_CENTER_URL') ? LICENSE_CENTER_URL : 'http://yutou.wtbidc.cn/license-center'), '/');
$portalUrls = [
    'templates' => $licenseCenterBase . '/portal_templates.php',
    'help' => $licenseCenterBase . '/portal_help.php',
    'features' => $licenseCenterBase . '/portal_features.php',
    'query' => $licenseCenterBase . '/portal_query.php',
    'versions' => $licenseCenterBase . '/portal_versions.php',
];
$homeBuilderUrl = cmsBuildFrontendUrl('home', 0, '', [
    'builder_edit' => 1,
    'builder_window' => 1,
    'builder_type' => 'home',
    'builder_ref_id' => 0,
    'builder_token' => cmsBuildBuilderAccessToken('home', 0, time() + 7200),
]);
$licenseQueryUrl = $portalUrls['query'];
$todayStart = strtotime(date('Y-m-d'));
$currentTemplateKey = $db->fetch("SELECT config_value FROM {$db->table('config')} WHERE config_key = 'site_template'")['config_value'] ?? 'default';
$unreadMessages = intval($db->fetch("SELECT COUNT(*) AS cnt FROM {$db->table('message')} WHERE is_read = 0")['cnt'] ?? 0);

$stats = [
    'article' => intval($db->fetch("SELECT COUNT(*) AS cnt FROM {$db->table('article')}")['cnt'] ?? 0),
    'product' => intval($db->fetch("SELECT COUNT(*) AS cnt FROM {$db->table('product')}")['cnt'] ?? 0),
    'member' => intval($db->fetch("SELECT COUNT(*) AS cnt FROM {$db->table('member')}")['cnt'] ?? 0),
    'guestbook_pending' => intval($db->fetch("SELECT COUNT(*) AS cnt FROM {$db->table('guestbook')} WHERE status = 0 OR is_show = 0")['cnt'] ?? 0),
    'channel' => intval($db->fetch("SELECT COUNT(*) AS cnt FROM {$db->table('channel')}")['cnt'] ?? 0),
    'slide' => intval($db->fetch("SELECT COUNT(*) AS cnt FROM {$db->table('slide')}")['cnt'] ?? 0),
];

$todayStats = [
    'article' => intval($db->fetch("SELECT COUNT(*) AS cnt FROM {$db->table('article')} WHERE create_time >= ?", [$todayStart])['cnt'] ?? 0),
    'product' => intval($db->fetch("SELECT COUNT(*) AS cnt FROM {$db->table('product')} WHERE create_time >= ?", [$todayStart])['cnt'] ?? 0),
    'member' => intval($db->fetch("SELECT COUNT(*) AS cnt FROM {$db->table('member')} WHERE reg_time >= ?", [$todayStart])['cnt'] ?? 0),
    'guestbook' => intval($db->fetch("SELECT COUNT(*) AS cnt FROM {$db->table('guestbook')} WHERE create_time >= ?", [$todayStart])['cnt'] ?? 0),
];

$viewsData = function_exists('getSiteViews') ? getSiteViews() : ['today_views' => 0, 'total_views' => 0];
$todayViews = intval($viewsData['today_views'] ?? 0);
$totalViews = intval($viewsData['total_views'] ?? 0);

$templates = [];
require_once ROOT_PATH . 'core/lib/template_categories.php';
$templateLoader = new \Core\Lib\TemplateLoader($license);
$templateListResult = $templateLoader->fetchRemoteTemplateList($currentLevel);
if (intval($templateListResult['code'] ?? 500) === 200) {
    $templates = $templateListResult['templates'] ?? [];
}
$templates = cmsSortTemplatesNewestFirst(is_array($templates) ? $templates : []);

$templateCards = [];
foreach (array_slice($templates, 0, 3) as $templateIndex => $template) {
    $thumbnail = trim((string) ($template['thumbnail'] ?? ''));
    $templateCards[] = [
        'name' => $template['name'] ?? '模板',
        'key' => $template['template_key'] ?? '',
        'tag' => $templateIndex === 0 ? '最新' : (!empty($template['is_hot']) ? '热门' : '推荐'),
        'thumbnail' => $thumbnail,
    ];
}

$quickApps = [
    ['label' => '文章管理', 'url' => '/admin/main.php?act=article', 'icon' => 'article'],
    ['label' => '产品管理', 'url' => '/admin/main.php?act=product', 'icon' => 'product'],
    ['label' => '图片管理', 'url' => '/admin/main.php?act=image', 'icon' => 'upload'],
    ['label' => '会员管理', 'url' => '/admin/main.php?act=member', 'icon' => 'member'],
    ['label' => 'SEO 设置', 'url' => '/admin/main.php?act=site', 'icon' => 'seo'],
    ['label' => '幻灯片管理', 'url' =>'/admin/main.php?act=slide', 'icon' => 'template'],
    ['label' => '订单管理', 'url' => '/admin/main.php?act=order', 'icon' => 'order', 'pro' => true],
    ['label' => '留言管理', 'url' => '/admin/main.php?act=guestbook', 'icon' => 'form'],
    ['label' => '在线支付', 'url' => '/admin/main.php?act=payment', 'icon' => 'payment', 'pro' => true],
    ['label' => '内容质量', 'url' => '/admin/main.php?act=content_quality', 'icon' => 'quality'],
];

$todoItems = [
    ['label' => '待处理留言', 'value' => $stats['guestbook_pending'], 'unit' => '条', 'url' => '/admin/main.php?act=guestbook'],
    ['label' => '未读站内消息', 'value' => $unreadMessages, 'unit' => '条', 'url' => '/admin/main.php?act=message'],
    ['label' => '今日新增会员', 'value' => $todayStats['member'], 'unit' => '位', 'url' => '/admin/main.php?act=member'],
    ['label' => '当前栏目', 'value' => $stats['channel'], 'unit' => '个', 'url' => '/admin/main.php?act=channel'],
];

$helpCards = [
    ['title' => '建站基础入门', 'url' => $portalUrls['help']],
    ['title' => '网站模块介绍', 'url' => $portalUrls['features']],
    ['title' => '授权服务指南', 'url' => $portalUrls['query']],
];

$seoActions = [
    ['label' => '顶级域名', 'value' => $siteHost, 'action' => '网站设置', 'url' => '/admin/main.php?act=site'],
    ['label' => '栏目数量', 'value' => $stats['channel'] . ' 个栏目', 'action' => '栏目管理', 'url' => '/admin/main.php?act=channel'],
    ['label' => '文章收录基础', 'value' => $stats['article'] . ' 篇文章', 'action' => '发布文章', 'url' => '/admin/main.php?act=article'],
    ['label' => '互动线索', 'value' => $stats['guestbook_pending'] . ' 条待处理', 'action' => '查看留言', 'url' => '/admin/main.php?act=guestbook'],
    ['label' => '今日新增会员', 'value' => $todayStats['member'] . ' 位', 'action' => '会员列表', 'url' => '/admin/main.php?act=member'],
    ['label' => '站内未读消息', 'value' => $unreadMessages . ' 条', 'action' => '站内消息', 'url' => '/admin/main.php?act=message'],
];

$runtimeTips = [
    ['label' => '当前模板', 'value' => $currentTemplateKey],
    ['label' => '授权版本', 'value' => $levelNames[$currentLevel] ?? '体验版'],
    ['label' => '系统版本', 'value' => 'v' . $systemVersion],
    ['label' => '站点域名', 'value' => $siteHost],
];
?>
<div class="page-container fade-in dashboard-fk-page">
    <header class="fk-dashboard-head">
        <div>
            <span class="fk-dashboard-eyebrow">网站运营工作台</span>
            <h1><?php echo htmlspecialchars($siteName, ENT_QUOTES, 'UTF-8'); ?></h1>
            <p><?php echo htmlspecialchars($siteHost, ENT_QUOTES, 'UTF-8'); ?> · 系统版本 v<?php echo htmlspecialchars($systemVersion, ENT_QUOTES, 'UTF-8'); ?></p>
        </div>
        <div class="fk-dashboard-actions">
            <a href="/admin/main.php?act=site" class="fk-flat-btn">网站设置</a>
            <a href="<?php echo htmlspecialchars($siteUrl, ENT_QUOTES, 'UTF-8'); ?>" target="_blank" class="fk-flat-btn">预览网站</a>
            <a href="<?php echo $currentLevel >= 3 ? htmlspecialchars($homeBuilderUrl, ENT_QUOTES, 'UTF-8') : htmlspecialchars($licenseQueryUrl, ENT_QUOTES, 'UTF-8'); ?>" target="_blank" rel="noopener noreferrer" class="fk-flat-btn fk-flat-btn-primary">装修网站</a>
        </div>
    </header>

    <section class="fk-metric-grid" aria-label="网站关键指标">
        <a href="/admin/main.php?act=dashboard" class="fk-metric-card"><span>今日访问</span><strong class="fk-counter" data-value="<?php echo $todayViews; ?>"><?php echo $todayViews; ?></strong><small>累计 <?php echo $totalViews; ?></small></a>
        <a href="/admin/main.php?act=article" class="fk-metric-card"><span>文章内容</span><strong class="fk-counter" data-value="<?php echo $stats['article']; ?>"><?php echo $stats['article']; ?></strong><small>今日新增 <?php echo $todayStats['article']; ?></small></a>
        <a href="/admin/main.php?act=product" class="fk-metric-card"><span>产品内容</span><strong class="fk-counter" data-value="<?php echo $stats['product']; ?>"><?php echo $stats['product']; ?></strong><small>今日新增 <?php echo $todayStats['product']; ?></small></a>
        <a href="/admin/main.php?act=guestbook" class="fk-metric-card"><span>待处理线索</span><strong class="fk-counter" data-value="<?php echo $stats['guestbook_pending']; ?>"><?php echo $stats['guestbook_pending']; ?></strong><small>今日新增 <?php echo $todayStats['guestbook']; ?></small></a>
    </section>

    <div class="fk-workbench">
        <main class="fk-main-col">
            <section class="fk-panel fk-hero-panel">
                <div class="fk-section-heading"><div><strong>建站与站点</strong><span>管理电脑端、移动端和当前站点配置</span></div></div>
                <div class="fk-hero-grid">
                    <a href="<?php echo $currentLevel >= 3 ? htmlspecialchars($homeBuilderUrl, ENT_QUOTES, 'UTF-8') : htmlspecialchars($licenseQueryUrl, ENT_QUOTES, 'UTF-8'); ?>" target="_blank" rel="noopener noreferrer" class="fk-scene-card fk-scene-card-desktop">
                        <div class="fk-scene-icon"><?php echo dashboardIconSvg('desktop'); ?></div>
                        <div class="fk-scene-copy">
                            <strong>电脑网站</strong>
                            <span>拖拽排版，快速完成官网搭建，适合品牌展示与内容营销。</span>
                            <em>去设计 ></em>
                        </div>
                    </a>
                    <a href="<?php echo $currentLevel >= 3 ? htmlspecialchars($homeBuilderUrl, ENT_QUOTES, 'UTF-8') : htmlspecialchars($licenseQueryUrl, ENT_QUOTES, 'UTF-8'); ?>" target="_blank" rel="noopener noreferrer" class="fk-scene-card fk-scene-card-mobile">
                        <div class="fk-scene-icon"><?php echo dashboardIconSvg('mobile'); ?></div>
                        <div class="fk-scene-copy">
                            <strong>手机网站</strong>
                            <span>覆盖移动端访问，支持微信、头条等场景展示与传播。</span>
                            <em>去设计 ></em>
                        </div>
                    </a>
                    <div class="fk-site-card">
                        <div class="fk-site-head">
                            <div>
                                <h3>我的网站</h3>
                                <p><?php echo htmlspecialchars($siteUrl, ENT_QUOTES, 'UTF-8'); ?></p>
                            </div>
                            <a href="<?php echo htmlspecialchars($siteUrl, ENT_QUOTES, 'UTF-8'); ?>" target="_blank" class="fk-site-open">预览</a>
                        </div>
                        <form class="fk-domain-form" onsubmit="return openLicensePage();">
                            <div class="fk-domain-input">
                                <span>www.</span>
                                <input type="text" value="<?php echo htmlspecialchars($siteHost, ENT_QUOTES, 'UTF-8'); ?>" readonly>
                            </div>
                            <button type="submit">查询授权</button>
                        </form>
                        <a href="<?php echo htmlspecialchars($portalUrls['features'], ENT_QUOTES, 'UTF-8'); ?>" target="_blank" rel="noopener noreferrer" class="fk-upgrade-pill">
                            <span>升级版本送域名</span>
                            <strong><?php echo htmlspecialchars($levelNames[$currentLevel] ?? '体验版', ENT_QUOTES, 'UTF-8'); ?></strong>
                        </a>
                    </div>
                </div>

                <div class="fk-section-heading fk-section-heading-apps"><div><strong>常用功能</strong><span>快速进入高频管理模块</span></div></div>
                <div class="fk-entry-grid">
                    <?php foreach ($quickApps as $app): ?>
                    <?php $appIcon = $app['icon'] ?? 'article'; ?>
                    <a
                        href="<?php echo $app['url']; ?>"
                        class="fk-entry-item"
                        <?php echo !empty($app['target']) ? ' target="' . htmlspecialchars($app['target'], ENT_QUOTES, 'UTF-8') . '"' : ''; ?>
                    >
                        <span class="fk-entry-icon"><?php echo dashboardIconSvg($appIcon); ?></span>
                        <span><?php echo htmlspecialchars($app['label'], ENT_QUOTES, 'UTF-8'); ?><?php if (!empty($app['pro'])): ?><em class="fk-pro-tag">专业版</em><?php endif; ?></span>
                    </a>
                    <?php endforeach; ?>
                </div>
            </section>

            <section class="fk-panel fk-template-panel">
                <div class="fk-panel-head">
                    <div class="fk-panel-title"><strong>推荐模板</strong><span>选择模板后可继续进行可视化装修</span></div>
                    <a href="/admin/main.php?act=template" class="fk-panel-link">进入模板中心</a>
                </div>
                <div class="fk-template-body">
                    <?php if (empty($templateCards)): ?>
                    <div class="fk-template-empty"><strong>模板数据暂不可用</strong><span>模板服务恢复后会自动显示推荐模板，也可以直接进入模板中心查看本地模板。</span><a href="/admin/main.php?act=template">打开模板中心</a></div>
                    <?php else: ?>
                    <div class="fk-template-grid">
                        <?php foreach ($templateCards as $index => $card): ?>
                        <a href="<?php echo htmlspecialchars($portalUrls['templates'], ENT_QUOTES, 'UTF-8'); ?>" target="_blank" rel="noopener noreferrer" class="fk-template-card fk-template-style-<?php echo ($index % 3) + 1; ?>">
                            <div class="fk-template-badge"><?php echo htmlspecialchars($card['tag'], ENT_QUOTES, 'UTF-8'); ?></div>
                            <div class="fk-template-shot">
                                <div class="fk-template-browser">
                                    <span></span><span></span><span></span>
                                </div>
                                <?php if (!empty($card['thumbnail'])): ?>
                                <img src="<?php echo htmlspecialchars($card['thumbnail'], ENT_QUOTES, 'UTF-8'); ?>" alt="<?php echo htmlspecialchars($card['name'], ENT_QUOTES, 'UTF-8'); ?>" class="fk-template-shot-image" onerror="this.style.display='none';this.nextElementSibling.style.display='block';">
                                <?php endif; ?>
                                <div class="fk-template-art<?php echo !empty($card['thumbnail']) ? ' is-thumbnail-fallback' : ''; ?>"></div>
                            </div>
                            <strong><?php echo htmlspecialchars($card['name'], ENT_QUOTES, 'UTF-8'); ?></strong>
                        </a>
                        <?php endforeach; ?>
                    </div>
                    <?php endif; ?>
                </div>
            </section>

            <section class="fk-panel fk-seo-panel">
                <div class="fk-panel-head fk-seo-head">
                    <div>
                        <strong>运营与站点基础</strong>
                        <span>集中检查域名、栏目、内容和互动线索。</span>
                    </div>
                    <a href="/admin/main.php?act=site" class="fk-panel-link">网站设置</a>
                </div>
                <div class="fk-seo-list">
                    <?php foreach ($seoActions as $item): ?>
                    <div class="fk-seo-row">
                        <div class="fk-seo-copy">
                            <span><?php echo htmlspecialchars($item['label'], ENT_QUOTES, 'UTF-8'); ?></span>
                            <strong><?php echo htmlspecialchars($item['value'], ENT_QUOTES, 'UTF-8'); ?></strong>
                        </div>
                        <a href="<?php echo htmlspecialchars($item['url'], ENT_QUOTES, 'UTF-8'); ?>"><?php echo htmlspecialchars($item['action'], ENT_QUOTES, 'UTF-8'); ?></a>
                    </div>
                    <?php endforeach; ?>
                </div>
            </section>
        </main>

        <aside class="fk-side-col">
            <section class="fk-panel fk-todo-panel">
                <div class="fk-side-head"><strong>运营待办</strong><span>需要关注的实时数据</span></div>
                <div class="fk-todo-list">
                    <?php foreach ($todoItems as $item): ?>
                    <a href="<?php echo htmlspecialchars($item['url'], ENT_QUOTES, 'UTF-8'); ?>" class="fk-todo-row"><span><?php echo htmlspecialchars($item['label'], ENT_QUOTES, 'UTF-8'); ?></span><strong><?php echo intval($item['value']); ?><small><?php echo htmlspecialchars($item['unit'], ENT_QUOTES, 'UTF-8'); ?></small></strong></a>
                    <?php endforeach; ?>
                </div>
            </section>

            <section class="fk-panel fk-help-panel">
                <div class="fk-side-head">
                    <strong>帮助中心</strong>
                    <a href="<?php echo htmlspecialchars($portalUrls['help'], ENT_QUOTES, 'UTF-8'); ?>" target="_blank" rel="noopener noreferrer">查看更多</a>
                </div>
                <form class="fk-help-search" onsubmit="return runHelpSearch();">
                    <input type="text" id="helpSearchInput" placeholder="输入您想了解的问题">
                    <button type="submit"><?php echo dashboardIconSvg('search'); ?></button>
                </form>
                <div class="fk-help-title">使用指南</div>
                <div class="fk-help-cards">
                    <?php foreach ($helpCards as $index => $card): ?>
                    <a href="<?php echo htmlspecialchars($card['url'], ENT_QUOTES, 'UTF-8'); ?>" target="_blank" rel="noopener noreferrer" class="fk-help-card fk-help-card-<?php echo $index + 1; ?>">
                        <span><?php echo htmlspecialchars($card['title'], ENT_QUOTES, 'UTF-8'); ?></span>
                        <em>查看</em>
                    </a>
                    <?php endforeach; ?>
                </div>
            </section>

            <section class="fk-panel fk-service-panel">
                <div class="fk-side-head">
                    <strong>系统概况</strong>
                    <a href="<?php echo htmlspecialchars($portalUrls['versions'], ENT_QUOTES, 'UTF-8'); ?>" target="_blank" rel="noopener noreferrer">版本信息</a>
                </div>
                <div class="fk-runtime-list">
                    <?php foreach ($runtimeTips as $tip): ?>
                    <div class="fk-runtime-row"><span><?php echo htmlspecialchars($tip['label'], ENT_QUOTES, 'UTF-8'); ?></span><strong><?php echo htmlspecialchars($tip['value'], ENT_QUOTES, 'UTF-8'); ?></strong></div>
                    <?php endforeach; ?>
                </div>
            </section>
        </aside>
    </div>
</div>

<script>
function openLicensePage() {
    window.open(<?php echo json_encode($portalUrls['query'], JSON_UNESCAPED_SLASHES); ?>, '_blank', 'noopener,noreferrer');
    return false;
}

function runHelpSearch() {
    var input = document.getElementById('helpSearchInput');
    if (!input) {
        return false;
    }
    var keyword = input.value.trim();
    if (keyword === '') {
        window.open(<?php echo json_encode($portalUrls['help'], JSON_UNESCAPED_SLASHES); ?>, '_blank', 'noopener,noreferrer');
        return false;
    }
    window.open(<?php echo json_encode($portalUrls['help'], JSON_UNESCAPED_SLASHES); ?> + '?keyword=' + encodeURIComponent(keyword), '_blank', 'noopener,noreferrer');
    return false;
}

(function enhanceDashboardMetrics() {
    var cards = document.querySelectorAll('.fk-metric-card');
    var reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var finePointer = window.matchMedia && window.matchMedia('(pointer: fine)').matches;

    for (var i = 0; i < cards.length; i++) {
        (function(card) {
            if (finePointer && !reducedMotion) {
                card.addEventListener('mousemove', function(event) {
                    var rect = card.getBoundingClientRect();
                    var rotateY = ((event.clientX - rect.left) / rect.width - 0.5) * 7;
                    var rotateX = (0.5 - (event.clientY - rect.top) / rect.height) * 7;
                    card.style.setProperty('--metric-rotate-x', rotateX.toFixed(2) + 'deg');
                    card.style.setProperty('--metric-rotate-y', rotateY.toFixed(2) + 'deg');
                });
                card.addEventListener('mouseleave', function() {
                    card.style.removeProperty('--metric-rotate-x');
                    card.style.removeProperty('--metric-rotate-y');
                });
            }
        })(cards[i]);
    }

    var counters = document.querySelectorAll('.fk-counter[data-value]');
    for (var j = 0; j < counters.length; j++) {
        (function(counter) {
            var target = parseInt(counter.getAttribute('data-value'), 10) || 0;
            if (reducedMotion || target === 0) {
                counter.textContent = target;
                return;
            }
            var start = performance.now();
            var duration = 760;
            function tick(now) {
                var progress = Math.min(1, (now - start) / duration);
                var eased = 1 - Math.pow(1 - progress, 3);
                counter.textContent = Math.round(target * eased);
                if (progress < 1) requestAnimationFrame(tick);
            }
            counter.textContent = '0';
            requestAnimationFrame(tick);
        })(counters[j]);
    }
})();
</script>

<style>
.dashboard-fk-page {
    max-width: 100%;
    padding: 18px;
    background: #f3f5fb;
}

.dashboard-fk-page .page-header {
    display: none;
}

.fk-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 18px;
    align-items: start;
}

.fk-main-col,
.fk-side-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fk-panel {
    background: #fff;
    border: 1px solid #e5eaf4;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.fk-hero-panel {
    padding: 18px 18px 12px;
}

.fk-hero-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.fk-scene-card,
.fk-site-card {
    min-height: 170px;
    border-radius: 10px;
}

.fk-scene-card {
    position: relative;
    overflow: hidden;
    padding: 26px 26px 22px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fk-scene-card::before,
.fk-scene-card::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    opacity: 0.18;
}

.fk-scene-card::before {
    width: 180px;
    height: 180px;
    right: -45px;
    bottom: -55px;
    background: rgba(255, 255, 255, 0.32);
}

.fk-scene-card::after {
    width: 120px;
    height: 120px;
    right: 42px;
    top: 26px;
    border: 2px solid rgba(255, 255, 255, 0.24);
}

.fk-scene-card-desktop {
    background: linear-gradient(135deg, #4f76ff 0%, #4d90ff 55%, #73a5ff 100%);
}

.fk-scene-card-mobile {
    background: linear-gradient(135deg, #4cc7de 0%, #45d6c4 50%, #6ce6c0 100%);
}

.fk-scene-icon,
.fk-entry-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fk-scene-icon svg,
.fk-entry-icon svg,
.fk-site-open svg,
.fk-feature-row i svg,
.fk-help-search button svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fk-scene-copy,
.fk-site-head,
.fk-upgrade-pill {
    position: relative;
    z-index: 1;
}

.fk-scene-copy strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.fk-scene-copy span {
    display: block;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.92);
}

.fk-scene-copy em {
    display: inline-flex;
    margin-top: 18px;
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #3163ea;
    font-style: normal;
    font-weight: 700;
}

.fk-site-card {
    padding: 24px;
    border: 1px solid #edf1f7;
    background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.fk-site-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fk-site-head h3 {
    margin: 0;
    font-size: 18px;
    color: #1f2937;
}

.fk-site-head p {
    margin: 12px 0 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.7;
    word-break: break-all;
}

.fk-site-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 36px;
    border-radius: 999px;
    background: #f3f6fd;
    color: #4c73ff;
    font-weight: 700;
}

.fk-domain-form {
    margin-top: 18px;
    display: flex;
    gap: 10px;
}

.fk-domain-input {
    flex: 1;
    height: 40px;
    border: 1px solid #dfe6f2;
    border-radius: 4px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
}

.fk-domain-input span {
    padding: 0 12px;
    font-size: 13px;
    color: #6b7280;
    border-right: 1px solid #edf1f7;
}

.fk-domain-input input {
    flex: 1;
    border: none;
    padding: 0 12px;
    background: transparent;
    color: #374151;
    outline: none;
}

.fk-domain-form button {
    width: 68px;
    border: 1px solid #cad5e7;
    border-radius: 4px;
    background: linear-gradient(180deg, #ffffff 0%, #eef2fb 100%);
    color: #4b5563;
    cursor: pointer;
}

.fk-upgrade-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffdd92 0%, #ffc35e 100%);
    color: #9a5b00;
    font-size: 13px;
    font-weight: 700;
}

.fk-entry-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    border-top: 1px solid #edf1f7;
    margin-top: 18px;
}

.fk-entry-item {
    min-height: 98px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #1f2937;
    border-right: 1px solid #edf1f7;
}

.fk-entry-item:last-child {
    border-right: none;
}

.fk-entry-item:hover {
    background: #f9fbff;
}

.fk-entry-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(180deg, #eef4ff 0%, #f9fbff 100%);
    color: #4c73ff;
}

.fk-entry-item span:last-child {
    font-size: 14px;
}

.fk-pro-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.fk-template-panel {
    padding: 0;
}

.fk-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #edf1f7;
}

.fk-panel-tabs {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fk-panel-tabs .is-muted {
    font-size: 13px;
    color: #4b5563;
}

.fk-panel-tabs button,
.fk-template-side button {
    border: none;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
}

.fk-panel-tabs button.is-active,
.fk-template-side button.is-active {
    color: #3d63f3;
    font-weight: 700;
}

.fk-panel-link {
    color: #4b63d6;
    font-size: 13px;
}

.fk-template-body {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 356px;
}

.fk-template-side {
    background: #f7f8fc;
    border-right: 1px solid #edf1f7;
    display: flex;
    flex-direction: column;
}

.fk-template-side button {
    flex: 1;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 2px;
    font-size: 18px;
}

.fk-template-grid {
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.fk-template-card {
    display: block;
    border: 1px solid #edf1f7;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.fk-template-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.fk-template-badge {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 160, 35, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.fk-template-card {
    position: relative;
}

.fk-template-shot {
    height: 230px;
    background: #f8faff;
    position: relative;
    overflow: hidden;
}

.fk-template-browser {
    height: 24px;
    padding: 8px 10px 0;
    display: flex;
    gap: 4px;
}

.fk-template-browser span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d0d9ea;
}

.fk-template-shot-image {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 36px;
    width: calc(100% - 24px);
    height: calc(100% - 48px);
    object-fit: cover;
    border-radius: 6px;
    z-index: 1;
}

.fk-template-art {
    height: calc(100% - 24px);
    margin: 0 12px 12px;
    border-radius: 6px;
    position: relative;
    z-index: 2;
    opacity: 0.92;
}

.fk-template-art.is-thumbnail-fallback {
    display: none;
}

.fk-template-style-1 .fk-template-art {
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 60%, #0ea5e9 100%);
}

.fk-template-style-2 .fk-template-art {
    background: linear-gradient(135deg, #3f3f46 0%, #991b1b 58%, #ef4444 100%);
}

.fk-template-style-3 .fk-template-art {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 58%, #67e8f9 100%);
}

.fk-template-card strong {
    display: block;
    padding: 16px 14px 18px;
    text-align: center;
    font-size: 15px;
    color: #1f2937;
}

.fk-seo-panel {
    padding: 0;
}

.fk-seo-head strong {
    display: block;
    font-size: 15px;
    color: #1f2937;
}

.fk-seo-head span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #9aa4b2;
}

.fk-seo-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4b5563;
}

.fk-seo-filter select {
    min-width: 112px;
    height: 34px;
    border: 1px solid #dbe3f1;
    border-radius: 4px;
    background: #fff;
}

.fk-seo-list {
    padding: 12px 18px 18px;
    display: grid;
    gap: 12px;
}

.fk-seo-row {
    min-height: 56px;
    border: 1px solid #edf1f7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    background: #fbfcff;
}

.fk-seo-copy span {
    display: block;
    font-size: 12px;
    color: #9aa4b2;
}

.fk-seo-copy strong {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: #1f2937;
}

.fk-seo-row a {
    color: #4c73ff;
    font-size: 13px;
    font-weight: 700;
}

.fk-promo-panel,
.fk-help-panel,
.fk-service-panel {
    padding: 0;
}

.fk-promo-card {
    min-height: 140px;
    margin: 18px 18px 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffa654 0%, #ff7f50 60%, #ffb26e 100%);
    color: #fff;
    padding: 24px 22px;
    position: relative;
    overflow: hidden;
}

.fk-promo-card::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 16px;
    width: 120px;
    height: 120px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.16);
    transform: rotate(-10deg);
}

.fk-promo-copy {
    position: relative;
    z-index: 1;
}

.fk-promo-copy strong {
    display: block;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 1px;
}

.fk-promo-copy span {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.8;
    max-width: 240px;
}

.fk-feature-list {
    margin-top: 18px;
    border-top: 1px solid #edf1f7;
}

.fk-feature-head,
.fk-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #edf1f7;
}

.fk-feature-head strong,
.fk-side-head strong {
    font-size: 15px;
    color: #374151;
}

.fk-side-head a {
    font-size: 13px;
    color: #6b7280;
}

.fk-feature-row {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 18px;
    border-bottom: 1px solid #f1f4f9;
}

.fk-feature-row span {
    font-size: 14px;
    color: #374151;
}

.fk-feature-row i {
    width: 18px;
    height: 18px;
    color: #bcc6d8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fk-more-link {
    display: block;
    padding: 14px 18px 18px;
    text-align: right;
    color: #4c73ff;
    font-size: 13px;
}

.fk-help-search {
    margin: 14px 18px 0;
    height: 40px;
    border: 1px solid #e1e7f2;
    border-radius: 4px;
    display: flex;
    overflow: hidden;
}

.fk-help-search input {
    flex: 1;
    border: none;
    padding: 0 12px;
    outline: none;
}

.fk-help-search button {
    width: 46px;
    border: none;
    background: #fff;
    color: #a1acc0;
    cursor: pointer;
}

.fk-help-title {
    padding: 16px 18px 0;
    font-size: 14px;
    color: #374151;
}

.fk-help-cards {
    padding: 14px 18px 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.fk-help-card {
    min-height: 92px;
    border-radius: 8px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #374151;
}

.fk-help-card-1 {
    background: linear-gradient(180deg, #eef3ff 0%, #f7f9ff 100%);
}

.fk-help-card-2 {
    background: linear-gradient(180deg, #fff1e5 0%, #fff8f2 100%);
}

.fk-help-card-3 {
    background: linear-gradient(180deg, #ffe9ef 0%, #fff7f9 100%);
}

.fk-help-card span {
    font-size: 15px;
    line-height: 1.6;
}

.fk-help-card em {
    align-self: flex-end;
    font-style: normal;
    font-size: 12px;
    color: #6b7280;
}

.fk-service-box {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
}

.fk-qr-box {
    width: 148px;
    height: 148px;
    border: 1px solid #dfe6f2;
    border-radius: 6px;
    padding: 10px;
    background: #fff;
}

.fk-qr-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    width: 100%;
    height: 100%;
}

.fk-qr-grid span {
    border-radius: 2px;
    background: #eef2f7;
}

.fk-qr-grid span.is-dark {
    background: #111827;
}

.fk-service-copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.fk-service-copy strong {
    font-size: 16px;
    color: #1f2937;
}

.fk-service-copy span {
    color: #4b5563;
    font-size: 14px;
}

.fk-runtime-list {
    border-top: 1px solid #edf1f7;
    padding: 10px 18px 18px;
    display: grid;
    gap: 8px;
}

.fk-runtime-row {
    font-size: 13px;
    color: #6b7280;
}

/* Workbench polish: visual-only refinements, no data or behavior changes. */
.dashboard-fk-page {
    padding-top: 4px;
}

.fk-workbench {
    align-items: start;
}

.fk-side-col {
    position: sticky;
    top: 18px;
}

.fk-panel {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fk-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #38bdf8, #22c55e);
    opacity: .72;
}

.fk-panel:hover {
    transform: translateY(-2px);
    border-color: #c7d2fe;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .10);
}

.fk-entry-item,
.fk-template-card,
.fk-help-card,
.fk-service-item,
.fk-runtime-row {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.fk-entry-item:hover,
.fk-template-card:hover,
.fk-help-card:hover,
.fk-service-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
}

.fk-seo-row {
    border-radius: 14px;
    transition: background .18s ease, transform .18s ease;
}

.fk-seo-row:hover {
    background: #f8fbff;
    transform: translateX(2px);
}

.fk-runtime-row {
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 10px 12px;
    margin-top: 8px;
}

.fk-template-shot {
    min-height: 190px;
}

.fk-template-shot-image {
    object-fit: cover;
}

@media (max-width: 1400px) {
    .fk-workbench {
        grid-template-columns: 1fr;
    }

    .fk-side-col {
        position: static;
    }

    .fk-entry-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .fk-hero-grid,
    .fk-template-grid,
    .fk-help-cards {
        grid-template-columns: 1fr;
    }

    .fk-template-body {
        grid-template-columns: 1fr;
    }

    .fk-template-side {
        border-right: none;
        border-bottom: 1px solid #edf1f7;
        flex-direction: row;
        min-height: 56px;
    }

    .fk-template-side button {
        writing-mode: initial;
        text-orientation: initial;
        letter-spacing: 0;
        font-size: 14px;
    }

    .fk-service-box {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-fk-page {
        padding: 12px;
    }

    .fk-entry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fk-panel-head,
    .fk-feature-head,
    .fk-side-head,
    .fk-seo-row,
    .fk-domain-form,
    .fk-seo-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .fk-domain-form button,
    .fk-seo-filter,
    .fk-site-open {
        width: 100%;
    }
}

/* Restrained 3D data layer: depth and motion without changing dashboard behavior. */
.dashboard-fk-page .fk-metric-grid {
    perspective: 1200px !important;
}

.dashboard-fk-page .fk-metric-card {
    --metric-accent: #2563eb;
    --metric-glow: rgba(37, 99, 235, .16);
    --metric-rotate-x: 0deg;
    --metric-rotate-y: 0deg;
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    transform-style: preserve-3d !important;
    background: linear-gradient(145deg, #ffffff 12%, #f8fbff 100%) !important;
    box-shadow: 0 2px 0 #dbe5f0, 0 12px 28px rgba(15, 23, 42, .08) !important;
    animation: fkMetricEnter .62s cubic-bezier(.2, .72, .24, 1) both;
    animation-delay: calc(var(--metric-index, 0) * 80ms);
    will-change: transform;
}

.dashboard-fk-page .fk-metric-card:nth-child(1) { --metric-index: 0; }
.dashboard-fk-page .fk-metric-card:nth-child(2) { --metric-index: 1; --metric-accent: #0f8b8d; --metric-glow: rgba(15, 139, 141, .15); }
.dashboard-fk-page .fk-metric-card:nth-child(3) { --metric-index: 2; --metric-accent: #d97706; --metric-glow: rgba(217, 119, 6, .14); }
.dashboard-fk-page .fk-metric-card:nth-child(4) { --metric-index: 3; --metric-accent: #dc4c64; --metric-glow: rgba(220, 76, 100, .14); }

.dashboard-fk-page .fk-metric-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -48px;
    right: -34px;
    width: 124px;
    height: 124px;
    border-radius: 38px;
    background: radial-gradient(circle at 35% 35%, var(--metric-glow), transparent 68%);
    transform: translateZ(10px) rotate(18deg);
}

.dashboard-fk-page .fk-metric-card::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--metric-accent), transparent 86%);
}

.dashboard-fk-page .fk-metric-card:hover {
    border-color: color-mix(in srgb, var(--metric-accent) 30%, #dbe4ee) !important;
    transform: perspective(900px) translateY(-6px) rotateX(var(--metric-rotate-x)) rotateY(var(--metric-rotate-y)) !important;
    box-shadow: 0 4px 0 #d5e0eb, 0 22px 42px rgba(15, 23, 42, .14), 0 0 26px var(--metric-glow) !important;
}

.dashboard-fk-page .fk-metric-card > span,
.dashboard-fk-page .fk-metric-card > small {
    transform: translateZ(14px);
}

.dashboard-fk-page .fk-metric-card > strong {
    color: var(--metric-accent) !important;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 8px 20px var(--metric-glow);
    transform: translateZ(24px);
}

@keyframes fkMetricEnter {
    from { opacity: 0; transform: perspective(900px) translateY(16px) rotateX(-7deg); }
    to { opacity: 1; transform: perspective(900px) translateY(0) rotateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-fk-page .fk-metric-card {
        animation: none !important;
        transform: none !important;
        will-change: auto;
    }
}
</style>
