/* 个人提醒卡片（校园跑 + 待办事项）
   视觉来源：预览/2026-09-15-个人提醒卡片设计预览.html（用户已确认的定稿样式）
   结构照搬预览页，仅把演示色值换成本文件自带的 --rc-* 主题变量（浅色默认 + [data-theme="dark"] 覆盖），
   避免与站点 --primary 语义耦合。改动本文件必须同步 bump 所有入口的 ?v= 并更新 sw.js 清单。 */

.rc-scope {
    --rc-green: #34a853;
    --rc-green-deep: #1e7e3a;
    --rc-green-bg: #e8f6ec;
    --rc-blue: #2f7ce0;
    --rc-blue-deep: #185fa5;
    --rc-blue-bg: #e8f1fb;
    --rc-red: #e24b4a;
    --rc-red-deep: #a32d2d;
    --rc-red-bg: #fcebeb;
    --rc-orange: #c47f17;
    --rc-orange-bg: #fdf3e3;
    --rc-ink: var(--text-main, var(--text, #1d1d1f));
    --rc-sub: var(--text-sub, var(--sub, #86868b));
    --rc-soft: #eef2f8;
    --rc-line: rgba(128, 128, 128, 0.18);
    /* 与首页其他卡片（.now-next-card/.glass）同一圆角层级 */
    --rc-radius: var(--home-radius-card, 24px);
    /* 卡面用实色：站点 --card-bg 是半透明玻璃（依赖 backdrop-filter），
       旧 Android WebView 不渲染磨砂会整张透出壁纸，这里不再继承 */
    --rc-surface: #ffffff;
}

[data-theme="dark"] .rc-scope {
    --rc-green-deep: #6fd08c;
    --rc-green-bg: rgba(52, 168, 83, 0.16);
    --rc-blue-deep: #7ab3f0;
    --rc-blue-bg: rgba(10, 132, 255, 0.18);
    --rc-red-deep: #f09595;
    --rc-red-bg: rgba(255, 59, 48, 0.16);
    --rc-orange: #e0a04a;
    --rc-orange-bg: rgba(255, 149, 0, 0.14);
    --rc-soft: rgba(255, 255, 255, 0.08);
    --rc-line: rgba(255, 255, 255, 0.14);
    --rc-surface: #1c1c1e;
}

/* user_settings.html 不挂 data-theme，暗色跟随系统（html:not([data-theme]) 时才生效，不影响 index 的主题开关） */
@media not all {
    html:not([data-theme]) .rc-scope {
        --rc-green-deep: #6fd08c;
        --rc-green-bg: rgba(52, 168, 83, 0.16);
        --rc-blue-deep: #7ab3f0;
        --rc-blue-bg: rgba(10, 132, 255, 0.18);
        --rc-red-deep: #f09595;
        --rc-red-bg: rgba(255, 59, 48, 0.16);
        --rc-orange: #e0a04a;
        --rc-orange-bg: rgba(255, 149, 0, 0.14);
        --rc-soft: rgba(255, 255, 255, 0.08);
        --rc-line: rgba(255, 255, 255, 0.14);
        --rc-surface: #1c1c1e;
    }
}

/* ===== 首页卡片容器：双开等高双列，单开独占一行 ===== */
#personal-reminder-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
    align-items: stretch;
}
#personal-reminder-cards[data-mode="run"] .rc-card-todo,
#personal-reminder-cards[data-mode="todo"] .rc-card-run { display: none; }
#personal-reminder-cards[data-mode="run"] .rc-card-run,
#personal-reminder-cards[data-mode="todo"] .rc-card-todo { grid-column: 1 / -1; }
.rc-card.wide-only,
.rc-card .wide-only { display: none !important; }
#personal-reminder-cards[data-mode="run"] .rc-card-run .wide-only,
#personal-reminder-cards[data-mode="todo"] .rc-card-todo .wide-only { display: flex !important; }

/* ===== 卡片表面：跟随站点磨砂玻璃主题 =====
   站点 --card-bg 是半透明色 + 各处配 backdrop-filter 磨砂；这里用同一变量和同参数模糊
   （与 .glass 一致：blur(20px)，不加 saturate），保证与首页其他卡片质感一致。
   不支持磨砂的引擎（@supports 判定）回退实色 --rc-surface，
   避免半透明无模糊直接透出壁纸。弹窗壳的玻璃质感由下方 ID 提权规则提供。 */
.rc-card {
    background: var(--rc-surface);
    background: var(--card-bg, var(--rc-surface));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .rc-card {
        background: var(--rc-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ===== 卡片骨架（对齐首页 .now-next-card 的描边/阴影/内距） ===== */
.rc-card {
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    border-radius: var(--rc-radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    /* 不设最小高度：双开时网格 stretch 让两卡等高（随内容较高一方），
       单开/空内容时卡片自然收紧，不留大片空白 */
    text-align: left;
}
.rc-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
/* 卡头标签与首页 .card-label（正在上课/下一节课）同一级：小号加粗灰字 + 大间距 */
.rc-card-title { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; color: var(--rc-sub); text-transform: uppercase; letter-spacing: 0.05em; }
.rc-card-title svg { width: 12px; height: 12px; flex: none; }
.rc-badge { font-size: 11px; font-weight: 600; background: var(--rc-blue-bg); color: var(--rc-blue-deep); border-radius: 999px; padding: 2px 9px; }
.rc-badge-green { background: var(--rc-green-bg); color: var(--rc-green-deep); }
.rc-badge-red { background: var(--rc-red-bg); color: var(--rc-red-deep); }

/* 校园跑卡 */
.rc-run-body { display: flex; align-items: center; gap: 12px; flex: 1; }
.rc-stats { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-stat-main { font-size: 12.5px; color: var(--rc-sub); white-space: nowrap; }
.rc-stat-main b { font-size: 18px; font-weight: 600; color: var(--rc-ink); letter-spacing: -0.01em; margin: 0 2px; }
.rc-stat-sub { font-size: 11.5px; color: var(--rc-sub); white-space: nowrap; }
.rc-ring-wrap { position: relative; width: 56px; height: 56px; flex: none; }
.rc-ring-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rc-ring-txt b { font-size: 12px; line-height: 1.1; color: var(--rc-ink); }
.rc-ring-txt span { font-size: 9.5px; color: var(--rc-sub); }
.rc-ring-fg { transition: stroke-dasharray 0.45s ease; }
.rc-run-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding-top: 12px; }
.rc-meta-row { display: flex; gap: 6px; flex-wrap: wrap; }
#personal-reminder-cards[data-mode="run"] .rc-meta-row { margin-left: auto; align-self: center; flex-direction: column; align-items: flex-end; gap: 6px; }
.rc-meta-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--rc-sub); background: var(--rc-soft); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.rc-done-banner { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--rc-green-deep); background: var(--rc-green-bg); border-radius: 11px; padding: 9px 12px; margin-top: auto; }

/* 待办卡 */
.rc-todo-list { display: flex; flex-direction: column; gap: 11px; }
.rc-todo-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rc-cb { width: 17px; height: 17px; flex: none; border-radius: 50%; border: 1.6px solid var(--rc-sub); opacity: 0.55; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; background: transparent; padding: 0; }
.rc-cb.on { background: var(--rc-green); border-color: var(--rc-green); opacity: 1; }
.rc-cb.red { border-color: var(--rc-red); opacity: 1; }
.rc-todo-item .rc-t { font-size: 13px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--rc-ink); }
.rc-due { font-size: 11.5px; color: var(--rc-sub); flex: none; white-space: nowrap; }
.rc-due.warn { color: var(--rc-red-deep); font-weight: 600; }
.rc-bell { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--rc-orange); flex: none; white-space: nowrap; }
.rc-todo-foot { margin-top: auto; padding-top: 12px; display: flex; }

/* 按钮 */
.rc-btn { flex: 1; border: none; border-radius: 11px; padding: 8px 0; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: transform 0.1s ease, background 0.18s ease; color: var(--rc-ink); }
.rc-btn:active { transform: scale(0.97); }
.rc-btn-primary { background: var(--rc-green); color: #fff; }
.rc-btn-done { background: var(--rc-green-bg); color: var(--rc-green-deep); }
.rc-btn-soft { background: var(--rc-soft); }
.rc-btn-disabled { background: var(--rc-soft); color: var(--rc-sub); cursor: default; }
.rc-btn[disabled] { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .rc-btn, .rc-btn:active, .rc-cb, .rc-ring-fg { transition: none; }
    .rc-btn:active { transform: none; }
}

/* ===== 弹窗壳：完全照搬站点现有 modal-overlay/modal-content/glass 体系 =====
   站点自带弹窗在 App WebView 已验证可用，自研壳同环境渲染异常，故整体换壳。
   全部用 ID 提权：index 上不影响站点其他弹窗（站点规则照常生效），
   settings 页（不加载 index.css）由这里的同值规则自给自足。 */
#rc-run-modal,
#rc-todo-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    /* 安卓 WebView（Compose 宿主）里 100vh/100dvh 恒为 0（app-font.js 2026-09-12 实测）。
       这条 ID 规则优先级高于 index.css 的 html.is-skxs-webview .modal-overlay 修复，
       且 user_settings.html 不加载 index.css，必须在此自带 --skxs-vh 兜底
       （app-font.js 在所有安卓页写入；无变量环境回退 1dvh*100 = 100dvh，行为不变）。 */
    height: calc(var(--skxs-vh, 1dvh) * 100);
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10060;
    opacity: 0;
    overscroll-behavior: contain;
    transition: opacity 0.25s ease;
    padding: 20px;
}
#rc-run-modal.show,
#rc-todo-modal.show { display: flex; opacity: 1; }
#rc-run-modal .modal-content,
#rc-todo-modal .modal-content {
    width: min(340px, 88vw);
    max-width: 100%;
    /* 同上：安卓 WebView 里 84vh 恒 0 会把卡片压成 0 高，改用 --skxs-vh 兜底 */
    max-height: calc(var(--skxs-vh, 1vh) * 84);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px 18px 16px;
    text-align: center;
    border-radius: 28px;
    background: var(--card-bg, var(--rc-surface, #fff));
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 0.5px solid rgba(255, 255, 255, 0.78);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.7);
    transform: scale(0.75) translateY(20px);
    opacity: 0;
}
#rc-run-modal.show .modal-content,
#rc-todo-modal.show .modal-content {
    animation: rcPopupBounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes rcPopupBounce {
    0% { opacity: 0; transform: scale(0.75) translateY(20px); }
    60% { opacity: 1; transform: scale(1.05) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    #rc-run-modal .modal-content,
    #rc-todo-modal .modal-content { transform: none; opacity: 1; animation: none; }
}
#rc-run-modal .rc-modal-art,
#rc-todo-modal .rc-modal-art { display: block; width: 96px; height: 96px; margin: 0 auto; }
#rc-run-modal h3,
#rc-todo-modal h3 { font-size: 16px; font-weight: 600; color: var(--rc-ink); margin: 10px 0 0; }
#rc-run-modal .rc-modal-desc,
#rc-todo-modal .rc-modal-desc { font-size: 12px; color: var(--rc-sub); margin: 3px 0 14px; line-height: 1.6; }
.rc-field { display: flex; align-items: center; gap: 8px; background: var(--rc-soft); border-radius: 11px; padding: 9px 12px; margin-bottom: 8px; text-align: left; }
.rc-field label { font-size: 12px; color: var(--rc-sub); flex: none; }
.rc-field .rc-val { font-size: 12.5px; font-weight: 600; color: var(--rc-ink); flex: 1; min-width: 0; }
.rc-input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 12.5px; color: var(--rc-ink); font-family: inherit; outline: none; }
.rc-input::placeholder { color: var(--rc-sub); }
.rc-stepper { display: flex; align-items: center; gap: 8px; }
.rc-stepper button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--rc-line); background: var(--rc-surface); color: var(--rc-ink); font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.rc-stepper b { font-size: 13px; color: var(--rc-ink); min-width: 20px; text-align: center; }
.rc-typeseg { display: flex; background: var(--rc-soft); border-radius: 10px; padding: 2px; margin-bottom: 8px; }
.rc-typeseg button { flex: 1; font-size: 12px; padding: 6px 0; border-radius: 8px; color: var(--rc-sub); background: transparent; border: none; cursor: pointer; font-family: inherit; }
.rc-typeseg button.rc-on { background: var(--rc-surface); color: var(--rc-ink); font-weight: 600; }
.rc-weekchips { display: flex; gap: 5px; margin-bottom: 8px; }
.rc-weekchips button { flex: 1; font-size: 11px; text-align: center; border-radius: 8px; padding: 5px 0; background: var(--rc-soft); color: var(--rc-sub); border: none; cursor: pointer; font-family: inherit; }
.rc-weekchips button.rc-on { background: var(--rc-blue-bg); color: var(--rc-blue-deep); font-weight: 600; }
.rc-switch { width: 38px; height: 22px; border-radius: 999px; background: var(--rc-line); position: relative; flex: none; cursor: pointer; border: none; padding: 0; transition: background 0.18s ease; }
.rc-switch::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: left 0.18s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.rc-switch.on { background: var(--rc-green); }
.rc-switch.on::after { left: 18px; }
.rc-group-title { font-size: 11px; font-weight: 600; color: var(--rc-sub); letter-spacing: 0.04em; margin: 12px 0 4px; text-align: left; }
.rc-mg-item { display: flex; align-items: center; gap: 8px; background: var(--rc-soft); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.rc-mg-item .rc-t { font-size: 12.5px; font-weight: 500; color: var(--rc-ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.rc-mg-item .rc-ops { display: flex; gap: 8px; color: var(--rc-sub); flex: none; }
.rc-mg-item .rc-ops button { background: transparent; border: none; padding: 0; cursor: pointer; color: inherit; display: flex; }
#rc-run-modal .rc-btn,
#rc-todo-modal .rc-btn { width: 100%; margin-top: 12px; padding: 10px 0; }
/* 取消/关闭：与保存按钮同尺寸的软色实心按钮，纯灰小字在浅色背景上几乎不可见 */
.rc-cancel { display: block; width: 100%; box-sizing: border-box; background: var(--rc-soft); border: 1px solid var(--rc-line); border-radius: 11px; color: var(--rc-ink); font-size: 12.5px; font-weight: 600; padding: 10px 0; margin: 8px 0 0; cursor: pointer; font-family: inherit; }
.rc-empty { font-size: 12px; color: var(--rc-sub); padding: 14px 0 6px; }
.rc-error { font-size: 12px; color: var(--rc-red-deep); margin: 0 0 8px; min-height: 1px; text-align: left; }