/* ============================================================
   套装：甜梦巴黎（马卡龙玻璃拟态）—— 完整独立 CSS 包
   ============================================================
   在相同 HTML 结构下，通过 body.outfit-macaron 作用域完全重排
   布局、重做组件形态、换字体/装饰。配色完全交由主题变量控制
   （--primary/--secondary/--accent/--bg/--card-bg 等均来自主题）。
   功能与 JS 逻辑不变。玻璃拟态 + 轻盈三段式。 */

/* ---------- 1. 全局氛围：仅形态变量，配色走主题 ---------- */
body.outfit-macaron {
    --radius: 26px;
    --radius-sm: 18px;
    --time-block-bg: rgba(255, 255, 255, 0.45);
    --marker-soft: rgba(255, 255, 255, 0.25);
    --paper-noise: none;
    --shadow-near: 0 8px 20px rgba(80, 80, 140, 0.14);
    --shadow-far: 0 22px 48px rgba(80, 80, 140, 0.18);
    --shadow: 0 8px 25px rgba(80, 80, 140, 0.16);
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    /* 氛围渐变用主题色派生（color-mix 现代支持；不支持时退化为透明） */
    background-image:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 45%),
        radial-gradient(circle at 85% 25%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 45%),
        radial-gradient(circle at 50% 92%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 50%);
}

/* ---------- 2. 关闭手账装饰 ---------- */
body.outfit-macaron .card-glass::before,
body.outfit-macaron .time-section::before,
body.outfit-macaron .setting-group::before,
body.outfit-macaron .drawer-tape,
body.outfit-macaron .time-section::after,
body.outfit-macaron .quote-section::after,
body.outfit-macaron header::after,
body.outfit-macaron .logo h1::after,
body.outfit-macaron .setting-group h3::after,
body.outfit-macaron .countdown-panel-title::after,
body.outfit-macaron .drawer-title::after {
    display: none;
}

/* ---------- 3. 整体布局：轻盈三段式 ---------- */
body.outfit-macaron .container { gap: clamp(14px, 2vw, 22px); }

body.outfit-macaron header {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-near), var(--shadow-far);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 14px 24px;
    min-height: 76px;
}

body.outfit-macaron .logo h1 {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.outfit-macaron .logo i { color: var(--accent); filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent)); }

/* ---------- 4. 主体双栏：时间卡放大成为视觉主角 ---------- */
body.outfit-macaron .content-wrapper { gap: clamp(16px, 2vw, 26px); }

body.outfit-macaron .time-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-near), var(--shadow-far);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    height: 220px;
    min-height: 220px;
    max-height: 220px;
    padding: 26px;
    overflow: visible;
}

/* 时间：翻页钟翻片分块 */
body.outfit-macaron .time-display {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    gap: 10px;
}
body.outfit-macaron .time-display > span:not(.colon):not(.milliseconds) {
    background:
        linear-gradient(to bottom, var(--time-block-bg) 0%, var(--time-block-bg) 48%, color-mix(in srgb, var(--primary) 8%, var(--time-block-bg)) 52%, var(--time-block-bg) 100%);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 6px 16px;
    min-width: 1.2ch;
    box-shadow: inset 0 1px 4px rgba(255,255,255,0.6), inset 0 -2px 4px color-mix(in srgb, var(--primary) 10%, transparent), var(--shadow-near);
    position: relative;
}
/* 翻页钟中间折线 */
body.outfit-macaron .time-display > span:not(.colon):not(.milliseconds)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: color-mix(in srgb, var(--primary) 25%, transparent);
    opacity: 0.6;
}
body.outfit-macaron .time-display .colon { color: var(--accent); }
body.outfit-macaron .milliseconds { color: var(--secondary); font-family: 'Consolas', monospace; }

body.outfit-macaron .date-display {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    padding: 5px 18px;
    border-radius: 50px;
    font-weight: 500;
}

body.outfit-macaron .quote-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-near), var(--shadow-far);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
body.outfit-macaron .quote-header h2 {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.outfit-macaron .quote-content::before,
body.outfit-macaron .quote-content::after { color: var(--accent); opacity: 0.3; }
body.outfit-macaron .quote-type {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-radius: 50px;
    color: var(--primary);
}

/* 马卡龙金句：渐变大字 + 大引号焦点 */
body.outfit-macaron .quote-content {
    font-size: 2.1rem;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 2px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 20px 30px;
}
body.outfit-macaron .quote-content::before {
    content: '“';
    font-size: 5rem;
    position: absolute;
    top: -10px;
    left: -5px;
    opacity: 0.5;
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
    font-weight: 900;
}
body.outfit-macaron .quote-content::after { display: none; }
body.outfit-macaron .quote-author {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    color: var(--secondary);
    font-weight: 600;
}

/* ---------- 5. 侧栏倒数日：玻璃胶囊 ---------- */
body.outfit-macaron .countdown-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-near), var(--shadow-far);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
body.outfit-macaron .countdown-panel-title {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    color: var(--primary);
    font-weight: 700;
}
body.outfit-macaron .countdown-item {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-radius: 50px;
    border: 1px solid var(--card-border);
}

/* ---------- 6. 按钮：渐变胶囊 ---------- */
body.outfit-macaron .btn {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: none;
    border-radius: 50px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 28%, transparent);
}
body.outfit-macaron .btn:hover { filter: brightness(1.05); transform: translateY(-2px); }
body.outfit-macaron .btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    text-shadow: none;
}
body.outfit-macaron .btn-outline:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* ---------- 7. 进度条：玻璃轨道 + 主题色辉光 ---------- */
body.outfit-macaron .progress-container,
body.outfit-macaron .quote-progress-container {
    background: rgba(0,0,0,0.08);
    border: none;
    box-shadow: none;
}
/* 填充条：主题色渐变辉光（覆盖全局紫色） */
body.outfit-macaron .progress-bar,
body.outfit-macaron .quote-progress-bar {
    background-image: linear-gradient(90deg,
        color-mix(in srgb, var(--primary) 25%, #fff),
        color-mix(in srgb, var(--secondary) 35%, #fff));
    box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 40%, transparent);
}
/* 时间框微调：主题色描边 + 柔和辉光 */
body.outfit-macaron .time-display > span:not(.colon):not(.milliseconds) {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--card-border));
    box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 20%, transparent), var(--shadow-near);
}
body.outfit-macaron .date-display {
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 15%, transparent);
}

/* ---------- 8. 设置面板：玻璃层 ---------- */
body.outfit-macaron .settings-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-near), var(--shadow-far);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
body.outfit-macaron .settings-header h2 {
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.outfit-macaron .setting-group {
    background: rgba(255,255,255,0.4);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-near);
}
body.outfit-macaron .setting-group h3 {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    color: var(--primary);
}
body.outfit-macaron .preset-btn,
body.outfit-macaron .action-btn {
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
}
body.outfit-macaron .preset-btn.active,
body.outfit-macaron .tag-filter-item.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
}

/* ---------- 9. 抽屉：玻璃 ---------- */
body.outfit-macaron .quick-drawer {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-near), var(--shadow-far);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
body.outfit-macaron .drawer-title { font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; color: var(--primary); }
body.outfit-macaron .drawer-item {
    border: 2px solid var(--primary);
    color: var(--primary);
    border-radius: var(--radius-sm);
}
body.outfit-macaron .drawer-item:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* ---------- 10. 浮动按钮：渐变圆 ---------- */
body.outfit-macaron .floating-btn {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ---------- 11. toast：玻璃 ---------- */
body.outfit-macaron .toast {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}