/* ═══════════════════════════════════════════
   🌿 小清新梦幻主题 - Fresh Dream Theme
   ═══════════════════════════════════════════ */

html, body {
    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    margin: 0; padding: 0; min-height: 100vh;
}

/* === 小清新渐变天空 === */
body {
    background: linear-gradient(170deg,
        #f0fdf4 0%,
        #ecfeff 12%,
        #fdf2f8 25%,
        #f5f3ff 38%,
        #f0fdf4 50%,
        #ecfeff 62%,
        #fdf2f8 75%,
        #f5f3ff 88%,
        #f0fdf4 100%
    );
    background-size: 800% 800%;
    animation: freshSky 30s ease infinite;
    background-attachment: fixed;
}

@keyframes freshSky {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

/* === 浮动气泡 === */
body::before {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        /* 大气泡光晕 */
        radial-gradient(300px 300px at 10% 20%, rgba(167,139,250,0.06) 0%, transparent 100%),
        radial-gradient(250px 250px at 80% 15%, rgba(244,114,182,0.06) 0%, transparent 100%),
        radial-gradient(280px 280px at 40% 60%, rgba(96,165,250,0.05) 0%, transparent 100%),
        radial-gradient(220px 220px at 70% 70%, rgba(251,191,36,0.04) 0%, transparent 100%),
        radial-gradient(260px 260px at 20% 85%, rgba(52,211,153,0.05) 0%, transparent 100%),
        /* 小气泡 */
        radial-gradient(3px 3px at 8% 12%, rgba(167,139,250,0.5) 50%, transparent 100%),
        radial-gradient(4px 4px at 22% 18%, rgba(244,114,182,0.4) 50%, transparent 100%),
        radial-gradient(3px 3px at 35% 8%, rgba(96,165,250,0.5) 50%, transparent 100%),
        radial-gradient(5px 5px at 48% 15%, rgba(52,211,153,0.35) 50%, transparent 100%),
        radial-gradient(3px 3px at 55% 22%, rgba(251,191,36,0.4) 50%, transparent 100%),
        radial-gradient(4px 4px at 65% 10%, rgba(167,139,250,0.45) 50%, transparent 100%),
        radial-gradient(3px 3px at 78% 25%, rgba(244,114,182,0.5) 50%, transparent 100%),
        radial-gradient(5px 5px at 88% 14%, rgba(96,165,250,0.35) 50%, transparent 100%),
        radial-gradient(4px 4px at 12% 28%, rgba(52,211,153,0.4) 50%, transparent 100%),
        radial-gradient(3px 3px at 42% 5%, rgba(251,191,36,0.45) 50%, transparent 100%),
        radial-gradient(5px 5px at 92% 30%, rgba(167,139,250,0.4) 50%, transparent 100%);
    animation: bubbles 8s ease-in-out infinite;
}

@keyframes bubbles {
    0%, 100% { opacity: 0.5; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-8px); }
}

/* === 滚动条 === */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.2); border-radius: 3px; }

/* === Blazor 错误条 === */
#blazor-error-ui {
    display: none;
    background: #fff3cd; bottom: 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    left: 0; padding: 0.7rem 1.25rem;
    position: fixed; width: 100%; z-index: 9999;
    font-size: 14px; color: #856404;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; font-weight: bold; }

/* ═══════════════════════════════════════
   🦶 页脚 - Footer
   ═══════════════════════════════════════ */
.site-footer {
    text-align: center;
    padding: 40px 20px 30px;
}

.foot-about {
    margin: 0 0 6px;
    font-size: 13px;
    color: #b0b0c0;
}

.foot-contact {
    margin: 0;
    font-size: 13px;
    color: #b0b0c0;
}

.foot-contact a {
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
}

.foot-contact a:hover {
    color: #6366f1;
}

/* ═══════════════════════════════════════
   🐾 回到顶部
   ═══════════════════════════════════════ */
#back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(148,120,232,0.2);
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(12px);
    font-size: 22px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.2s, box-shadow 0.3s;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
#back-to-top[style*="opacity: 1"] {
    pointer-events: auto;
}
#back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(148,120,232,0.2);
}

/* ═══════════════════════════════════════
   ✅ 复制 Toast
   ═══════════════════════════════════════ */
#copy-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(60px);
    padding: 10px 24px;
    background: rgba(34,197,94,0.92);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(34,197,94,0.25);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#copy-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* === 通用工具类 === */
a { color: #7c3aed; }

/* ═══════════════════════════════════════════
   🌙 深色模式
   ═══════════════════════════════════════════ */
body.dark {
    background: linear-gradient(170deg,
        #0f0f1a 0%, #12102a 12%, #1a0f1e 25%, #11102a 38%,
        #0f0f1a 50%, #12102a 62%, #1a0f1e 75%, #11102a 88%,
        #0f0f1a 100%
    );
    background-size: 800% 800%;
    background-attachment: fixed;
    color: #c8c8d8;
}

body.dark::before {
    background:
        radial-gradient(300px 300px at 10% 20%, rgba(99,102,241,0.06) 0%, transparent 100%),
        radial-gradient(250px 250px at 80% 15%, rgba(168,85,247,0.06) 0%, transparent 100%),
        radial-gradient(280px 280px at 40% 60%, rgba(96,165,250,0.04) 0%, transparent 100%),
        radial-gradient(3px 3px at 8% 12%, rgba(167,139,250,0.3) 50%, transparent 100%),
        radial-gradient(4px 4px at 22% 18%, rgba(244,114,182,0.25) 50%, transparent 100%),
        radial-gradient(3px 3px at 35% 8%, rgba(96,165,250,0.3) 50%, transparent 100%),
        radial-gradient(5px 5px at 48% 15%, rgba(52,211,153,0.2) 50%, transparent 100%),
        radial-gradient(3px 3px at 55% 22%, rgba(251,191,36,0.25) 50%, transparent 100%),
        radial-gradient(4px 4px at 65% 10%, rgba(167,139,250,0.28) 50%, transparent 100%),
        radial-gradient(3px 3px at 78% 25%, rgba(244,114,182,0.3) 50%, transparent 100%),
        radial-gradient(5px 5px at 88% 14%, rgba(96,165,250,0.2) 50%, transparent 100%),
        radial-gradient(4px 4px at 12% 28%, rgba(52,211,153,0.25) 50%, transparent 100%);
}

/* 深色 — 卡片 */
body.dark .card,
body.dark [class*="card"],
body.dark .foot-card {
    background: rgba(22,22,40,0.7);
    border-color: rgba(255,255,255,0.06);
    color: #c8c8d8;
}
body.dark .card:hover,
body.dark .bubble-over:hover {
    border-color: rgba(148,120,232,0.2);
}

/* 深色 — 导航 */
body.dark .top-nav {
    background: rgba(12,12,24,0.75);
    border-bottom-color: rgba(255,255,255,0.06);
}
body.dark .nav-item { color: #999; }
body.dark .nav-item:hover { background: rgba(167,139,250,0.1); color: #a78bfa; }
body.dark .nav-item.active { background: rgba(99,102,241,0.15); color: #a78bfa; }
body.dark .nav-search {
    background: rgba(22,22,40,0.6);
    border-color: rgba(255,255,255,0.08);
    color: #ccc;
}
body.dark .nav-dark-toggle {
    background: rgba(22,22,40,0.6);
    border-color: rgba(255,255,255,0.08);
}
body.dark .brand { color: #a78bfa; }

/* 深色 — 输入框/文本域 */
body.dark input[type="text"],
body.dark input[type="number"],
body.dark input[type="search"],
body.dark textarea,
body.dark select {
    background: rgba(22,22,40,0.6);
    border-color: rgba(255,255,255,0.08);
    color: #c8c8d8;
}
body.dark input:focus, body.dark textarea:focus, body.dark select:focus {
    border-color: #818cf8;
}

/* 深色 — 页脚 */
body.dark .foot-about, body.dark .foot-contact { color: #777; }
body.dark .foot-contact a { color: #a78bfa; }

/* 深色 — 英雄标题 */
body.dark .hero h1 { -webkit-text-fill-color: #c8c8d8; }
body.dark .subtitle { color: #777; }

/* 深色 — 按钮 */
body.dark .btn-copy {
    background: rgba(22,22,40,0.6);
    border-color: rgba(255,255,255,0.08);
    color: #999;
}

/* 深色 — code / result */
body.dark code, body.dark .r-value { color: #c8c8d8; }
body.dark .r-card, body.dark .hist-item { background: rgba(22,22,40,0.4); border-color: rgba(255,255,255,0.05); }

/* 深色 — 进度条 */
body.dark .progress-bar { background: rgba(255,255,255,0.05); }

/* 深色 — Toast 和回到顶部 */
body.dark #back-to-top { background: rgba(22,22,40,0.7); border-color: rgba(255,255,255,0.1); }
body.dark #copy-toast { background: rgba(34,197,94,0.85); }

/* 深色 — 上传区 */
body.dark .upload-zone {
    background: rgba(22,22,40,0.4);
    border-color: rgba(255,255,255,0.06);
}
body.dark .conv-types .src-fmt { background: rgba(99,102,241,0.1); }

/* 深色 — 泡泡 */
body.dark .bubble {
    background: radial-gradient(circle at 35% 30%, rgba(167,139,250,0.25), rgba(167,139,250,0.35));
}

/* 深色 — 滚动条 */
body.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

/* 深色 — 预览、面板等 */
body.dark .color-preview { border-color: rgba(255,255,255,0.1); }
body.dark .panel textarea[readonly] { background: rgba(18,18,32,0.5); }
body.dark .opt { background: rgba(22,22,40,0.3); }
body.dark .opt:hover { background: rgba(148,120,232,0.08); }
body.dark .section { border-top-color: rgba(255,255,255,0.06); }
body.dark .result-display { background: rgba(99,102,241,0.08); }
body.dark .err-display { background: rgba(220,38,38,0.08); }
body.dark .err-msg { background: rgba(220,38,38,0.1); color: #fca5a5; }
body.dark .qrcode canvas { background: #fff; }