/* ==========================================================================
   base.css —— 全站手机端统一适配地基（共享样式表）
   --------------------------------------------------------------------------
   URL：/static/common/css/base.css        （由 main.py 的 /static/common 挂载）
   引入方式：在每个页面的 <head> 里、页面自身 <style> 之前引入，
             这样页面自己的规则永远优先，base.css 只补空缺、不抢样式：
             <link rel="stylesheet" href="/static/common/css/base.css">

   本文件负责四件事：
     1. 移动端基础重置：禁掉 iOS 意外放大文字、输入框统一 16px 防聚焦缩放
     2. 统一高度基准：dvh 优先、vh 兜底，规避地址栏收起/展开导致的错位
     3. 安全区（刘海 / 灵动岛 / 底部横条）：统一用 --sa-* 变量
     4. 补齐此前"全站没有定义"的样式：.modal / .modal-content /
        .profile-*（个人中心）/ .btn-logout / .card-active
   ========================================================================== */

:root {
    /* ---- 安全区：不支持 env() 的老 WebView 会自动取 0px，不会报错 ---- */
    --sa-top: env(safe-area-inset-top, 0px);
    --sa-right: env(safe-area-inset-right, 0px);
    --sa-bottom: env(safe-area-inset-bottom, 0px);
    --sa-left: env(safe-area-inset-left, 0px);

    /* ---- 手机壳宽度：小屏铺满，大屏居中 ---- */
    --app-max: 480px;

    /* ---- 品牌配色（各模块原本各写各的十六进制，这里统一成变量） ---- */
    --c-brand: #2f9b64;
    --c-brand-dk: #1f7a4d;
    --c-brand-lt: #5fcf90;
    --c-ink: #1a4f35;
    --c-text: #2c3e50;
    --c-muted: #7d9e8e;
    --c-line: #d9efe2;
    --c-danger: #ff4d4f;
    --c-warn: #faad14;

    /* ---- 手机端可读性下限 ---- */
    --fs-min: 12px;     /* 正文/说明文字不得小于这个值 */
    --fs-input: 16px;   /* iOS 聚焦 <16px 的输入框会自动放大整页 */
}

/* ==========================================================================
   1. 移动端基础重置
   ========================================================================== */

* { box-sizing: border-box; }

html {
    /* 关键：禁止 iOS 在横竖屏切换 / 聚焦时自作主张放大文字 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
    color: var(--c-text);
    background: #121212;
    -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; }

/* 输入类控件统一 16px。
   注意：maximum-scale=1.0 / user-scalable=no 在 iOS 10+ 的 Safari 里已被忽略，
   所以"聚焦自动放大"只能靠字号 ≥16px 根治，不能靠 viewport。 */
input, textarea, select {
    font-family: inherit;
    font-size: var(--fs-input);
}

/* 只对文本类输入框去掉系统默认外观（避免 iOS 叠加内阴影、圆角下显脏）。
   刻意不动 checkbox / radio / range，否则这些控件会被"清空"。 */
input[type="text"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="email"], textarea {
    -webkit-appearance: none;
    appearance: none;
}

/* 按钮：移动端点击不要有 300ms 延迟，也不要触发双击缩放 */
button, [role="button"], .clickable { touch-action: manipulation; }

/* ==========================================================================
   2. 手机壳统一高度基准
   ========================================================================== */

.app-shell {
    width: 100%;
    max-width: var(--app-max);
    margin: 0 auto;
    height: 100vh;      /* 老浏览器兜底 */
    height: 100dvh;     /* 现代浏览器：随地址栏收放动态计算，不会再被顶出可视区 */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: #fff;
}

/* ==========================================================================
   3. 安全区工具类（需要的地方直接加 class）
   ========================================================================== */

.sa-top    { padding-top: calc(12px + var(--sa-top)) !important; }
.sa-bottom { padding-bottom: calc(12px + var(--sa-bottom)) !important; }

/* ==========================================================================
   4. 通用弹窗遮罩
   --------------------------------------------------------------------------
   index.html 之前的 #profile-modal / #common-modal / #rank-modal /
   #pk-rank-modal 都写了 class="modal"，但全站没有任何 CSS 定义 .modal，
   于是它们被 display:flex 打开后只是"文档流里的普通块"，不是遮罩弹窗 ——
   这是手机端看起来乱的最主要原因，这里补齐。
   注意：.modal 默认 display:none，JS 打开时写 inline display:flex（inline 优先）。
   ========================================================================== */

.modal {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;   /* inset 老 iOS 不支持，先写四向 */
    inset: 0;
    z-index: 1200;                          /* 高于各页面最大 z-index */
    display: none;
    align-items: center;
    justify-content: center;
    padding: calc(16px + var(--sa-top)) calc(16px + var(--sa-right))
             calc(16px + var(--sa-bottom)) calc(16px + var(--sa-left));
    background: rgba(8, 40, 26, 0.62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: auto;
    /* 弹窗永远不超过一屏，且给安全区留位，内容超长时内部滚动 */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - var(--sa-top) - var(--sa-bottom) - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    padding: 22px 18px;
    text-align: center;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.modal-content h2,
.modal-content h3 { margin: 0 0 6px; color: var(--c-brand-dk); font-size: 17px; }
.modal-content p { margin: 8px 0; }

/* 弹窗内按钮：index.html 之前完全没有按钮样式，按钮只有浏览器默认外观 */
.modal-content button {
    width: 100%;
    min-height: 44px;               /* 移动端最小点击热区 */
    padding: 11px 16px;
    margin-top: 8px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--c-brand-lt), var(--c-brand));
    box-shadow: 0 3px 10px rgba(63, 174, 116, 0.25);
    cursor: pointer;
}
.modal-content button:active { transform: scale(0.98); }

.modal-content .btn-logout {
    background: linear-gradient(135deg, #ff7875, var(--c-danger));
    box-shadow: 0 3px 10px rgba(255, 77, 79, 0.28);
}

/* 账号安全入口（登录设备管理）：用蓝色与主色/危险色区分开 */
.modal-content .btn-security {
    background: linear-gradient(135deg, #6bb8f0, #2f7fd6);
    box-shadow: 0 3px 10px rgba(47, 127, 214, 0.28);
}

/* 并排按钮：直接写 <div class="btn-row"> 包两个 button 即可 */
.btn-row { display: flex; gap: 10px; margin-top: 12px; }
.btn-row button { margin-top: 0; }

/* ==========================================================================
   5. 个人中心
   --------------------------------------------------------------------------
   .profile-avatar-wrap / .profile-stats-grid / .profile-stat-box /
   .profile-stat-label / .profile-stat-val 此前全站都没有定义，
   个人中心弹窗点开就是一排裸 <div>，这里补齐。
   ========================================================================== */

.profile-avatar-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e7f8ef, #c8eed9);
    box-shadow: 0 4px 14px rgba(63, 174, 116, 0.22);
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.profile-stat-box {
    background: #f5fbf7;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: 10px 8px;
}
.profile-stat-label { font-size: var(--fs-min); color: var(--c-muted); }
.profile-stat-val {
    margin-top: 4px;
    font-size: 17px;
    font-weight: 800;
    color: var(--c-brand);
}

/* 320~359px 的窄屏（iPhone SE 一代 / 老安卓）退化为单列，避免每格只剩 ~110px */
@media (max-width: 359px) {
    .profile-stats-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. 卡片点击反馈（.card-active 此前没有定义，navToModule 加了等于没加）
   ========================================================================== */

.card-active { transform: scale(0.96); opacity: 0.9; }

/* ==========================================================================
   7. 表格兜底：窄屏允许横向滚动，而不是把页面撑破
   ========================================================================== */

.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { max-width: 100%; }

/* ==========================================================================
   8. 长文本兜底：防止长英文/URL/无空格串顶破卡片
   ========================================================================== */

.wrap-anywhere { overflow-wrap: anywhere; word-break: break-word; }

/* ==========================================================================
   9. 无障碍：尊重系统"减少动态效果"设置
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}