/* ===== 99联储 · 公共基础样式 ===== */

:root {
    --bg: #070410;
    --bg2: #0d0820;
    --gold: #f5c542;
    --gold2: #d4a017;
    --cyan: #22d3ee;
    --violet: #8b5cf6;
    --line: rgba(245, 197, 66, .14);

    /* 底部导航的高度构成：内容行高 + 底部安全留白。
       安全留白只跟设备走，不设下限——原来写的是 max(18px, env(...))，但本项目的页面
       都没有 viewport-fit=cover，env(safe-area-inset-*) 恒为 0，那个 18px 下限等于
       凭空把底栏垫高 18px（纯留白，没有任何避让作用：没开 cover 时系统本来就把页面
       顶在安全区上方）。去掉后底栏正好是行高 60px。
       哪天要做全屏沉浸式，加上 viewport-fit=cover 即可，这里会自动涨到刘海机的
       ~34px，不用改代码——这也是留着这个变量而不是直接删掉的原因。 */
    --tab-row-h: 60px;
    --tabbar-bottom: env(safe-area-inset-bottom);
}

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

html, body {
    margin: 0;
    padding: 0;
    background: #000;
    color: #fff;
    font-family: 'Noto Sans SC', 'Sora', sans-serif;
}

body {
    display: flex;
    justify-content: center;
}

.font-display {
    font-family: 'Sora', sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* App 容器 */
.app-container {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    background: var(--bg);
    position: relative;
    overflow-x: hidden;
    /* 到底部留一点呼吸。原来这里是写死的 90px，给底部导航让位的——
       但没有导航的页面（表单页、列表页）白拿了 90px 的死区，滚到底会多出一大片空白。 */
    padding-bottom: 24px;
}

/* 只有带底部导航的页面（目前是 index.html）才需要完整避开它：
   行高 + 安全留白 + 12px 间隙（当前 = 60 + 0 + 12 = 72px）。 */
.app-container.has-tabbar {
    padding-bottom: calc(var(--tab-row-h) + var(--tabbar-bottom) + 12px);
}

/* 页面顶部留白 = 该页左右内边距，刘海/状态栏更高时按设备让位。
 *
 * 为什么要有这个类：页面原来各自写死 pt-12 / pt-20，顶部变成左右的 2~3 倍，
 * 视觉上"头顶空了一块"。顶部和左右本来就是为同一件事服务的——把内容从屏幕边缘挪开——
 * 只是顶上的约束更强一点（要避开状态栏）。
 * 想留富余也该跟着设备走，而不是写死一个大数。
 *
 * 用法：用 --page-top 声明这一页的左右内边距（px-5 → 20px、px-6 → 24px），
 * 类本身保证顶部不低于它、也不低于系统安全区。默认 24px 对应 px-6。
 * env(safe-area-inset-top) 只在开 viewport-fit=cover 时非零，未开时恒为 0。 */
.page-top {
    padding-top: max(var(--page-top, 24px), env(safe-area-inset-top));
}

/* 背景效果 */
.bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(245, 197, 66, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 197, 66, .03) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
}

.bg-glow1 {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 197, 66, .15), transparent 60%);
    top: -100px;
    left: -100px;
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
}

.bg-glow2 {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, .2), transparent 60%);
    bottom: 100px;
    right: -150px;
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

/* 渐变文字 */
.text-gold {
    background: linear-gradient(135deg, #fde68a, #f5c542, #a87b08);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-cyan-violet {
    background: linear-gradient(135deg, #22d3ee, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 滚动条隐藏 */
::-webkit-scrollbar {
    display: none;
}