/* Ombre Gateway - 新拟态蓝白基调（与 home-mcp 小窝同一套视觉语言）
   参考 Neumorphism：卡片与背景同色，靠双向柔和阴影
   （外凸 raise / 内凹 sink）做出浮雕感 */

:root {
    --bg: #e8eef8;
    --bg-2: #eef3fb;
    --ink: #33456b;
    --ink2: #7d8db0;
    --blue: #5b85e0;
    --blue-deep: #3b6ad0;
    --shadow-dark: rgba(147, 165, 201, 0.55);
    --shadow-light: rgba(255, 255, 255, 0.95);
    --raise: -6px -6px 14px var(--shadow-light), 6px 6px 14px var(--shadow-dark);
    --raise-sm: -3px -3px 8px var(--shadow-light), 3px 3px 8px var(--shadow-dark);
    --sink: inset -3px -3px 7px var(--shadow-light), inset 3px 3px 7px var(--shadow-dark);
    --serif: "Georgia", "Times New Roman", serif;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
    background: #e8eef8;
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* 背景：蓝白渐变 + 静态光晕（不加无限动画，避免手机端持续重绘卡顿） */
.app-bg {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 85% 3%, rgba(122, 160, 230, 0.14) 0%, transparent 42%),
        radial-gradient(circle at 6% 96%, rgba(180, 205, 245, 0.18) 0%, transparent 42%),
        linear-gradient(165deg, #dfe9f7 0%, #e8eef8 40%, #f2f6fc 100%);
    z-index: -2;
}

/* 手机竖屏容器 */
.app-frame {
    width: 100%;
    max-width: 430px;
    height: 100vh;
    height: 100dvh;
    position: relative;
    overflow: hidden;
}

/* 主卡片：软浮雕（原毛玻璃卡片，类名保留） */
.glass-card {
    background: var(--bg-2);
    border: none;
    border-radius: 24px;
    box-shadow: var(--raise);
}

/* 顶部栏：与背景同色，靠下方细阴影分层 */
.glass-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    background: transparent;
    border-bottom: none;
}
.glass-header h2 {
    color: var(--ink) !important;
    letter-spacing: 2px;
}

/* 底部 Tab：悬浮软浮雕胶囊 */
.tab-bar {
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 44px);
    max-width: 386px;
    display: flex;
    justify-content: space-around;
    padding: 0.375rem 0.375rem;
    background: var(--bg-2);
    border-top: none;
    border-radius: 999px;
    box-shadow: var(--raise);
    z-index: 50;
}
.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.5rem 0.25rem 0.375rem;
    border-radius: 999px;
    color: var(--ink2);
    font-size: 0.625rem;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: color 0.2s;
    /* 7 个 Tab 后单项空间变小：min-width 收窄防小屏（320px）横向溢出 */
    min-width: 2.25rem;
    position: relative;
}
.tab-item:hover, .tab-item.active {
    color: var(--blue-deep);
}
.tab-item.active {
    background: none;
}
.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blue);
}

/* 输入框：内凹槽 */
.glass-input {
    padding: 0.75rem 1rem;
    background: var(--bg-2);
    border: none;
    border-radius: 16px;
    box-shadow: var(--sink);
    font-size: 0.875rem;
    outline: none;
    transition: box-shadow 0.2s;
    color: var(--ink);
}
.glass-input:focus {
    box-shadow: var(--sink), 0 0 0 2px rgba(91, 133, 224, 0.18);
}
.glass-input::placeholder {
    color: var(--ink2);
}

/* 按钮：凸起药丸，按下变内凹 */
.btn-primary {
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #7da3ea, var(--blue));
    color: white;
    border: none;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: box-shadow 0.15s, opacity 0.2s;
    box-shadow: -4px -4px 10px var(--shadow-light), 4px 4px 12px rgba(91, 133, 224, 0.45);
}
.btn-primary:active {
    box-shadow: inset 2px 2px 6px rgba(43, 74, 140, 0.4);
}
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    padding: 0.625rem 1rem;
    background: var(--bg-2);
    color: var(--blue-deep);
    border: none;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--raise-sm);
    transition: box-shadow 0.15s;
}
.btn-secondary:hover {
    color: var(--blue);
}
.btn-secondary:active {
    box-shadow: var(--sink);
}

/* 统计卡片 */
.stat-card {
    background: var(--bg-2);
    border: none;
    border-radius: 18px;
    padding: 1rem 1.25rem;
    box-shadow: var(--raise-sm);
    transition: box-shadow 0.15s;
}
.stat-card:active {
    box-shadow: var(--sink);
}
.stat-value {
    font-family: var(--serif);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--blue-deep);
    margin-top: 0.25rem;
}
.stat-label {
    font-size: 0.75rem;
    color: var(--ink2);
    font-weight: 500;
    letter-spacing: 1px;
}

/* Section 卡片 */
.section-card {
    background: var(--bg-2);
    border: none;
    border-radius: 24px;
    padding: 1.25rem;
    box-shadow: var(--raise);
}

/* 输入区域：内凹槽 */
.input-field {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--bg-2);
    border: none;
    border-radius: 14px;
    box-shadow: var(--sink);
    font-size: 0.8125rem;
    outline: none;
    transition: box-shadow 0.2s;
    color: var(--ink);
}
.input-field:focus {
    box-shadow: var(--sink), 0 0 0 2px rgba(91, 133, 224, 0.18);
}
.input-field::placeholder {
    color: var(--ink2);
}

.textarea-field {
    width: 100%;
    min-height: 200px;
    padding: 0.75rem 0.875rem;
    background: var(--bg-2);
    border: none;
    border-radius: 16px;
    box-shadow: var(--sink);
    font-size: 0.8125rem;
    outline: none;
    resize: vertical;
    font-family: inherit;
    line-height: 1.7;
    color: var(--ink);
    transition: box-shadow 0.2s;
}
.textarea-field:focus {
    box-shadow: var(--sink), 0 0 0 2px rgba(91, 133, 224, 0.18);
}
.textarea-field::placeholder {
    color: var(--ink2);
}

/* Badge：内凹小徽章 */
.badge-ok {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-2);
    box-shadow: var(--sink);
    color: #3d8a5f;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 1px;
}
.badge-err {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-2);
    box-shadow: var(--sink);
    color: #c05656;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 1px;
}
.badge-warn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-2);
    box-shadow: var(--sink);
    color: #b08a3e;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 1px;
}

/* 平台配置块：浅内凹分区 */
.platform-block {
    padding: 0.875rem;
    background: var(--bg-2);
    border: none;
    border-radius: 16px;
    box-shadow: var(--sink);
}

/* 梦境卡片（旧样式，保留给其它页面引用） */
.dream-card {
    border-left: none;
    background: var(--bg-2) !important;
    box-shadow: var(--raise-sm);
}

/* ── 信笺（日记页）：横线信纸 + 软浮雕外壳，与小窝信箱一致 ── */
.letter-card {
    position: relative;
    background: var(--bg-2);
    border: none;
    border-radius: 20px;
    box-shadow: var(--raise-sm);
    padding: 1rem 1.125rem 0.875rem 1.75rem;
    cursor: pointer;
    transition: box-shadow 0.2s;
    overflow: hidden;
}
.letter-card:hover {
    box-shadow: var(--raise);
}
/* 左侧装订线 */
.letter-card::before {
    content: '';
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: 0.9375rem;
    width: 0;
    border-left: 1px solid rgba(91, 133, 224, 0.3);
    background: none;
}
/* 信头：类型戳 + 日期，虚线分隔像信纸抬头 */
.letter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.5625rem;
    margin-bottom: 0.375rem;
    border-bottom: 1px dashed rgba(91, 133, 224, 0.32);
}
.letter-stamp {
    display: inline-block;
    padding: 0.1875rem 0.5625rem;
    border: none;
    border-radius: 6px;
    color: var(--blue);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 2px;
    background: var(--bg-2);
    box-shadow: var(--sink);
}
.letter-stamp-dream {
    color: #7a7fd6;
    border-color: transparent;
    background: var(--bg-2);
}
.letter-stamp-secret {
    color: #c2708e;
    border-color: transparent;
    background: var(--bg-2);
}
.letter-date {
    font-size: 0.6875rem;
    color: var(--ink2);
    font-variant-numeric: tabular-nums;
}
/* 信笺抬头：展开时居中的“致 你”（参考寄不出的信插件 detail-to） */
.letter-to {
    text-align: center;
    font-size: 0.6875rem;
    color: var(--ink2);
    letter-spacing: 2px;
    margin: 0.25rem 0 0.5rem;
}
/* 信纸正文：横格线 + 行高对齐 */
.letter-body {
    font-size: 0.75rem;
    color: var(--ink);
    line-height: 1.9em;
    white-space: pre-wrap;
    background-image: repeating-linear-gradient(
        transparent 0,
        transparent calc(1.9em - 1px),
        rgba(91, 133, 224, 0.14) calc(1.9em - 1px),
        rgba(91, 133, 224, 0.14) 1.9em
    );
    word-break: break-word;
}
/* 梦境/秘密信笺：同底色，靠戳区分（保持蓝白干净） */
.letter-card.letter-dream {
    background: var(--bg-2);
    border-color: transparent;
}
.letter-card.letter-secret {
    background: var(--bg-2);
    border-color: transparent;
}
.letter-card.letter-secret::before {
    border-left-color: rgba(194, 112, 142, 0.3);
}
/* 落款 */
.letter-sign {
    margin: 0.625rem 0 0;
    text-align: right;
    font-size: 0.6875rem;
    color: var(--ink2);
    letter-spacing: 1px;
}
.letter-actions {
    margin-top: 0.5rem;
    text-align: right;
}

/* 聊天气泡 */
.chat-bubble-user {
    background: linear-gradient(135deg, rgba(125, 163, 234, 0.16), rgba(91, 133, 224, 0.12));
    border: none;
    border-radius: 14px 14px 4px 14px;
    box-shadow: var(--raise-sm);
    padding: 8px 12px;
}
.chat-bubble-ai {
    background: var(--bg-2);
    border: none;
    border-radius: 14px 14px 14px 4px;
    box-shadow: var(--raise-sm);
    padding: 8px 12px;
}

/* 日志 */
.log-entry {
    padding: 0.375rem 0.625rem;
    border-bottom: 1px solid rgba(147, 165, 201, 0.18);
    font-family: 'SF Mono', 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--ink);
}
.log-entry:hover {
    background: rgba(147, 165, 201, 0.08);
}
.log-level-ERROR { color: #c05656; font-weight: 600; }
.log-level-WARNING { color: #c26a2d; }
.log-level-INFO { color: var(--blue); }

/* 聊天消息 */
.chat-msg {
    padding: 0.625rem 0.875rem;
    border-radius: 16px;
    margin-bottom: 0.5rem;
    max-width: 90%;
}
.chat-msg.user {
    background: linear-gradient(135deg, rgba(125, 163, 234, 0.16), rgba(91, 133, 224, 0.1));
    border: none;
    box-shadow: var(--raise-sm);
    margin-left: auto;
}
.chat-msg.assistant {
    background: var(--bg-2);
    border: none;
    box-shadow: var(--raise-sm);
}

/* Toast：软浮雕胶囊 */
.toast {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.625rem 1.375rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 1px;
    z-index: 9999;
    background: var(--bg-2);
    box-shadow: var(--raise);
    animation: fadeDown 0.3s ease;
}
.toast-success {
    color: #3d8a5f;
    border: none;
}
.toast-error {
    color: #c05656;
    border: none;
}
@keyframes fadeDown {
    from { transform: translateX(-50%) translateY(-1rem); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* Section 标题：衬线斜体点缀，与小窝卡片标题一致 */
.section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ink2);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 0.75rem;
}

/* Field Label */
.field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ink2);
    margin-bottom: 0.375rem;
}

/* Filter Chips：凸起小药丸，选中变内凹 */
.filter-chip {
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 1px;
    border: none;
    background: var(--bg-2);
    box-shadow: var(--raise-sm);
    color: var(--ink2);
    cursor: pointer;
    transition: box-shadow 0.15s, color 0.2s;
    /* 横向滚动容器里禁止收缩换行：CJK 文本 min-content 只有单字宽，
       不锁定的话胶囊会被压成一字宽竖排文字 */
    white-space: nowrap;
    flex-shrink: 0;
}
.filter-chip.active {
    background: var(--bg-2);
    box-shadow: var(--sink);
    color: var(--blue-deep);
}
.filter-chip:hover:not(.active) {
    color: var(--blue);
}

/* Line Clamp */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 原生控件跟随主色 */
input[type="checkbox"] {
    accent-color: var(--blue);
}
select.input-field {
    -webkit-appearance: none;
    appearance: none;
}

/* 滚动条 */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(147, 165, 201, 0.4); border-radius: 3px; }

/* 滚动容器：隔离重绘范围 + 顺滑惯性滚动 */
#content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    contain: layout paint;
}

/* ── Tailwind 工具类调和层：页面 JS 里散落的白底/灰字映射到新拟态色板
   （Tailwind CDN 运行时注入的样式排在本文件之后，需 !important 压住）── */
.bg-white\/30, .bg-white\/40, .bg-white\/60, .bg-blue-50\/40 {
    background: var(--bg-2) !important;
    box-shadow: var(--sink);
    border-color: transparent !important;
}
.bg-gray-100\/60, .bg-blue-50\/60 {
    background: var(--bg-2) !important;
    box-shadow: var(--sink);
}
.text-gray-700, .text-gray-800 { color: var(--ink) !important; }
.text-gray-400, .text-gray-500 { color: var(--ink2) !important; }
.text-gray-600 { color: var(--ink) !important; }

/* ── 仅手机端适配：所有屏幕宽度统一使用手机版式 ──
   （430px 手机框居中 + 底部 Tab 胶囊），桌面端不再提供侧边栏布局。
   原桌面适配（≥768px 侧边栏 + 双列、≥1280px 对齐）已按需求移除。 */

/* 系统开启减弱动效时关掉所有过渡 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── 经期页：周期进度环 + 月历（参考 Flo/Clue/drip 的经典布局）── */

/* 进度环：SVG 外环 + 绝对定位居中文字 */
.pd-ring-wrap {
    position: relative;
    width: 190px;
    margin: 0 auto;
}
.pd-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0 2.25rem;
    text-align: center;
}
.pd-ring-big {
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
}
.pd-ring-sub {
    font-size: 0.6875rem;
    color: var(--ink2);
    letter-spacing: 1px;
}

/* 月历 */
.pd-cal-nav {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: var(--bg-2);
    box-shadow: var(--raise-sm);
    color: var(--blue-deep);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: box-shadow 0.15s;
}
.pd-cal-nav:active {
    box-shadow: var(--sink);
}
.pd-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px 0;
    text-align: center;
}
.pd-cal-wd {
    font-size: 0.625rem;
    color: var(--ink2);
    letter-spacing: 1px;
    padding: 0.25rem 0 0.375rem;
}
.pd-cell {
    position: relative;
    height: 2.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-cell .d {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.pd-cell.dim .d {
    color: #b9c4da;
}
/* 实际经期：实心玫红 */
.pd-cell.period .d {
    background: linear-gradient(135deg, #e59ab5, #d6537e);
    color: #fff;
    font-weight: 600;
    box-shadow: -2px -2px 5px rgba(255, 255, 255, 0.9), 2px 2px 6px rgba(214, 83, 126, 0.35);
}
/* 预测期：虚线描边 */
.pd-cell.pred .d {
    border: 1.5px dashed #e59ab5;
    color: #d6537e;
}
.pd-cell.period.pred .d {
    border: none;
}
/* 今天：蓝色外圈 */
.pd-cell.today .d {
    box-shadow: 0 0 0 2px var(--blue);
}
/* 易孕窗：紫点 */
.pd-dot {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #8a7fd6;
}
/* 图例 */
.pd-legend {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.625rem;
    font-size: 0.625rem;
    color: var(--ink2);
    letter-spacing: 1px;
}
.pd-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.pd-legend .lg {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
}
.lg-period {
    background: linear-gradient(135deg, #e59ab5, #d6537e);
}
.lg-pred {
    border: 1.5px dashed #e59ab5;
}
.lg-fertile {
    background: #8a7fd6;
    width: 0.375rem !important;
    height: 0.375rem !important;
}
.lg-today {
    background: var(--bg-2);
    box-shadow: 0 0 0 2px var(--blue);
}