/* ============================================================
   套装：萌力全开（软萌可爱·糖果圆润）—— 完整独立 CSS 包
   ============================================================
   在相同 HTML 结构下，通过 body.outfit-kawaii 作用域完全重排
   布局、重做组件形态。配色全部交由主题变量控制。
   萌点：超大圆角、糖果泡泡背景、星星点缀、彩虹描边、
   胖墩墩按钮、圆嘟嘟卡片。功能与 JS 逻辑不变。 */

/* ---------- 1. 全局氛围：形态变量 + 萌系背景 ---------- */
body.outfit-kawaii {
    --radius: 34px;
    --radius-sm: 26px;
    --time-block-bg: rgba(255, 255, 255, 0.55);
    --marker-soft: rgba(255, 255, 255, 0.4);
    --paper-noise: none;
    --shadow-near: 0 6px 16px rgba(120, 90, 150, 0.16);
    --shadow-far: 0 20px 46px rgba(120, 90, 150, 0.22);
    --shadow: 0 10px 30px rgba(120, 90, 150, 0.18);
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    /* 糖果泡泡背景 */
    background-image:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 40%),
        radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--secondary) 20%, transparent), transparent 40%),
        radial-gradient(circle at 25% 85%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%),
        radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--secondary) 14%, transparent), transparent 38%);
}

/* 散落星光 + 星星点缀（萌系氛围，多颗星星分布全屏） */
body.outfit-kawaii::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--accent) 60%, transparent) 2px, transparent 3px),
        radial-gradient(circle at 20% 8%, color-mix(in srgb, var(--secondary) 55%, transparent) 1.5px, transparent 2.5px),
        radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--accent) 50%, transparent) 2px, transparent 3px),
        radial-gradient(circle at 95% 30%, color-mix(in srgb, var(--primary) 55%, transparent) 1.5px, transparent 2.5px),
        radial-gradient(circle at 6% 40%, color-mix(in srgb, var(--secondary) 45%, transparent) 2px, transparent 3px),
        radial-gradient(circle at 93% 60%, color-mix(in srgb, var(--accent) 45%, transparent) 2px, transparent 3px),
        radial-gradient(circle at 10% 75%, color-mix(in srgb, var(--primary) 45%, transparent) 1.5px, transparent 2.5px),
        radial-gradient(circle at 88% 85%, color-mix(in srgb, var(--secondary) 50%, transparent) 2px, transparent 3px),
        radial-gradient(circle at 15% 92%, color-mix(in srgb, var(--accent) 40%, transparent) 1.5px, transparent 2.5px),
        radial-gradient(circle at 50% 4%, color-mix(in srgb, var(--primary) 50%, transparent) 1.5px, transparent 2.5px),
        radial-gradient(circle at 70% 95%, color-mix(in srgb, var(--accent) 45%, transparent) 2px, transparent 3px);
}

/* 左上角星星 & 爱心贴纸 */
body.outfit-kawaii .container::before {
    content: '✨ ♡ ✦';
    position: fixed;
    top: 14px;
    left: 20px;
    font-size: 1.15rem;
    letter-spacing: 12px;
    color: color-mix(in srgb, var(--accent) 55%, transparent);
    z-index: 5;
    pointer-events: none;
    transform: rotate(-6deg);
}

/* 右上角小花贴纸 */
body.outfit-kawaii .container::after {
    content: '✿  ✧  ❀';
    position: fixed;
    top: 16px;
    right: 24px;
    font-size: 1.05rem;
    letter-spacing: 10px;
    color: color-mix(in srgb, var(--secondary) 55%, transparent);
    z-index: 5;
    pointer-events: none;
    transform: rotate(8deg);
}

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

/* ---------- 3. 头部：圆嘟嘟胶囊条 ---------- */
body.outfit-kawaii header {
    background: var(--card-bg);
    border: 3px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-near), var(--shadow-far);
    padding: 16px 26px;
    min-height: 88px;
}

body.outfit-kawaii .logo h1 {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-weight: 900;
    letter-spacing: 3px;
    background: linear-gradient(90deg, var(--accent), var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.outfit-kawaii .logo i {
    color: var(--accent);
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--accent) 50%, transparent));
    transform: rotate(-12deg);
}

/* logo 文字两侧爱心贴纸 */
body.outfit-kawaii .logo h1::before { content: '♡'; margin-right: 6px; color: var(--accent); -webkit-text-fill-color: var(--accent); }
body.outfit-kawaii .logo h1::after { content: '♡'; margin-left: 6px; color: var(--accent); -webkit-text-fill-color: var(--accent); }

/* ---------- 4. 主体：胖乎乎卡片 ---------- */
body.outfit-kawaii .time-section {
    background: var(--card-bg);
    border: 4px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-near), var(--shadow-far);
    height: 240px;
    min-height: 240px;
    max-height: 240px;
    padding: 30px;
}

/* 时间卡左上角小花贴纸（kawaii 专属，覆盖手账关闭规则） */
body.outfit-kawaii .time-section::before {
    content: '❀';
    position: absolute;
    top: -10px;
    left: 18px;
    font-size: 1.4rem;
    color: color-mix(in srgb, var(--accent) 60%, transparent);
    z-index: 3;
    transform: rotate(-10deg);
}
body.outfit-kawaii .time-section::after {
    content: '✿';
    position: absolute;
    top: -12px;
    right: 18px;
    font-size: 1.3rem;
    color: color-mix(in srgb, var(--secondary) 55%, transparent);
    z-index: 3;
    transform: rotate(12deg);
}

/* 时间：圆滚滚软糖块 */
body.outfit-kawaii .time-display {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    gap: 10px;
}
body.outfit-kawaii .time-display > span:not(.colon):not(.milliseconds) {
    background: var(--time-block-bg);
    border: 4px solid var(--card-border);
    border-radius: 999px;
    padding: 8px 20px;
    min-width: 1.2ch;
    box-shadow: 0 6px 0 color-mix(in srgb, var(--card-border) 40%, transparent), var(--shadow-near);
}
body.outfit-kawaii .time-display .colon { color: var(--accent); font-weight: 900; }
body.outfit-kawaii .milliseconds { color: var(--secondary); font-family: 'Consolas', monospace; }

body.outfit-kawaii .date-display {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    padding: 7px 24px;
    border-radius: 999px;
    font-weight: 700;
    border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

body.outfit-kawaii .quote-section {
    background: var(--card-bg);
    border: 4px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-near), var(--shadow-far);
    position: relative;
    height: auto;
    min-height: 280px;
    max-height: 340px;
}
/* 顶部蝴蝶结贴纸 */
body.outfit-kawaii .quote-section::before {
    content: '🎀';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    z-index: 4;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
body.outfit-kawaii .quote-header h2 {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-weight: 800;
    background: linear-gradient(90deg, var(--accent), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* 圆嘟嘟气泡引号：紧凑不溢出 */
body.outfit-kawaii .quote-content {
    background: var(--time-block-bg);
    border: 3px dashed color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 26px;
    padding: 12px 22px;
    margin: 8px 4px;
}
body.outfit-kawaii .quote-content::before,
body.outfit-kawaii .quote-content::after { color: var(--accent); opacity: 0.5; font-weight: 900; font-size: 1.6rem; }
/* 金句字体：圆体可爱风格 + 更大更粗 */
body.outfit-kawaii .quote-content {
    font-family: 'Yuanti SC', 'YouYuan', '幼圆', 'STYuanti', 'Microsoft YaHei', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.5;
    letter-spacing: 3px;
}
body.outfit-kawaii .quote-type {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 999px;
    font-weight: 600;
}

/* ---------- 5. 侧栏：圆嘟嘟 ---------- */
body.outfit-kawaii .countdown-panel {
    background: var(--card-bg);
    border: 4px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-near), var(--shadow-far);
}
body.outfit-kawaii .countdown-panel-title {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    color: var(--primary);
    font-weight: 900;
}
body.outfit-kawaii .countdown-item {
    background: color-mix(in srgb, var(--secondary) 14%, transparent);
    border: 2px solid color-mix(in srgb, var(--secondary) 25%, transparent);
    border-radius: 999px;
    font-weight: 700;
}

/* ---------- 6. 按钮：胖墩墩糖果 ---------- */
body.outfit-kawaii .btn {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 80%, #fff), var(--primary));
    color: #fff;
    border: 3px solid color-mix(in srgb, var(--primary) 55%, #000);
    border-radius: 999px;
    font-weight: 800;
    box-shadow: 0 6px 0 color-mix(in srgb, var(--primary) 50%, #000);
}
body.outfit-kawaii .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 0 color-mix(in srgb, var(--primary) 50%, #000);
}
body.outfit-kawaii .btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--primary) 50%, #000);
}
body.outfit-kawaii .btn-outline {
    background: var(--card-bg);
    border: 3px solid var(--primary);
    color: var(--primary);
    box-shadow: 0 6px 0 color-mix(in srgb, var(--primary) 30%, transparent);
}
body.outfit-kawaii .btn-outline:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); box-shadow: 0 9px 0 color-mix(in srgb, var(--primary) 30%, transparent); }

/* ---------- 7. 进度条：糖果轨道 + 糖果渐变填充 ---------- */
body.outfit-kawaii .progress-container,
body.outfit-kawaii .quote-progress-container {
    background: rgba(0,0,0,0.12);
    border: 2px solid var(--card-border);
    box-shadow: none;
    height: 10px;
    border-radius: 999px;
}
body.outfit-kawaii .progress-bar,
body.outfit-kawaii .quote-progress-bar {
    background-image: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 70%, #fff),
        color-mix(in srgb, var(--primary) 60%, #fff));
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
}
/* 时间框微调：糖果描边 + 立体 */
body.outfit-kawaii .time-display > span:not(.colon):not(.milliseconds) {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--card-border));
}
body.outfit-kawaii .date-display {
    border: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ---------- 8. 设置面板：软糯 ---------- */
body.outfit-kawaii .settings-panel {
    background: var(--card-bg);
    border: 4px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-near), var(--shadow-far);
}
body.outfit-kawaii .settings-header h2 {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-weight: 900;
    background: linear-gradient(90deg, var(--accent), var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.outfit-kawaii .setting-group {
    background: rgba(255,255,255,0.5);
    border: 3px solid var(--card-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-near);
}
body.outfit-kawaii .setting-group h3 { font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; color: var(--primary); font-weight: 800; }
body.outfit-kawaii .preset-btn,
body.outfit-kawaii .action-btn {
    background: rgba(255,255,255,0.6);
    border: 2px solid var(--card-border);
    border-radius: 999px;
    font-weight: 600;
}
body.outfit-kawaii .preset-btn.active,
body.outfit-kawaii .tag-filter-item.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 80%, #fff), var(--primary));
    border-color: color-mix(in srgb, var(--primary) 50%, #000);
    color: #fff;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--primary) 45%, #000);
}

/* ---------- 9. 抽屉：软糯 ---------- */
body.outfit-kawaii .quick-drawer {
    background: var(--card-bg);
    border: 4px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-near), var(--shadow-far);
}
body.outfit-kawaii .drawer-title { font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; color: var(--primary); font-weight: 900; }
body.outfit-kawaii .drawer-item {
    border: 3px solid var(--primary);
    color: var(--primary);
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--primary) 30%, transparent);
}
body.outfit-kawaii .drawer-item:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); transform: translateX(4px); }

/* ---------- 10. 浮动按钮：糖果圆 ---------- */
body.outfit-kawaii .floating-btn {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 80%, #fff), var(--primary));
    color: #fff;
    border: 3px solid color-mix(in srgb, var(--primary) 50%, #000);
    border-radius: 50%;
    box-shadow: 0 6px 0 color-mix(in srgb, var(--primary) 45%, #000);
}
body.outfit-kawaii .floating-btn:hover { transform: translateY(-3px); }

/* ---------- 11. toast：软糯 ---------- */
body.outfit-kawaii .toast {
    background: var(--card-bg);
    border: 3px solid var(--card-border);
    border-radius: var(--radius-sm);
}