* { margin: 0; padding: 0; box-sizing: border-box; }
/* 全局生效，移除padding内margin外边距，让 width/height 包含 padding 和 borde */

/* 全局框架 */
body {
    color: var(--ink);
    flex-direction: column;/* 弹性布局的主轴垂直  */
    overflow: hidden;/* 超出视口的内容不显示  */
    min-height: 100vh;/* 至少满屏，vh==viewpoint height */
    font-family: var(--font-serif);
    background: linear-gradient(200deg, var(--bg-deep) 30%, var(--bg-mid) 60%, var(--bg-end) 100%);/* 渐变背景，原始deg从下往上，deg为逆时针旋转的角度 */
    position: relative;/* 使 body 成为全局绝对定位元素的参照基准 */
    display: flex;/* 弹性布局，可以控制内部元素 */
    /* 顶部留白 = 固定顶栏高度 + 外框内边距，防止内容被顶栏遮住 */
    padding: calc(var(--topbar-h) + var(--frame-pad)) var(--frame-pad) var(--frame-pad);
    align-items: center;/* 垂直中轴 */
    justify-content: center;/* 水平中轴 */
    user-select: none;/* ── 禁止选中文字 ── */
}

/* 鼠标停留在星图层面时不会拖蓝文字；输入框保留  */
input, textarea {
    user-select: text;
}

/* ── 隐藏原生鼠标图标（自定义光标接管），伪元素需要单独选中 ── */
*, *::before, *::after {
    cursor: none !important;
}

/* ── 点击时十字/箭头的缩小效果（由 JS mousedown/mouseup 触发） ── */
.custom-crosshair.pressed {
    width: 22px !important;
    height: 22px !important;
}
.custom-caret.pressed {
    border-left-width: 11px;
    border-top-width: 7px;
    border-bottom-width: 7px;
}

/* ── 星光四芒准星（与星星十字同类型：中心亮点 + 渐变芒线） ── */
.custom-crosshair {
    transform: translate(-50%, -50%);
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    pointer-events: none; /* 让准星不接受鼠标的事件  */
    z-index: 99999;
    transition: width 0.1s ease, height 0.1s ease;
    will-change: transform; /* 高频变化的优化，需要一定性能，不可以滥用  */
}

/* 四向渐变芒线：中心亮 → 末端透明（星光芒） */
.custom-crosshair::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.9) 35%, rgba(var(--gold-rgb), 0.9) 65%, transparent) center / 100% 1px no-repeat,
        linear-gradient(180deg, transparent, rgba(var(--gold-rgb), 0.9) 35%, rgba(var(--gold-rgb), 0.9) 65%, transparent) center / 1px 100% no-repeat;
}

/* 中心亮点 */
.custom-crosshair::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, var(--gold-bright) 0%, rgba(var(--gold-rgb), 0.5) 50%, transparent 75%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* ── 风格化输入光标：金色箭头（替代原生 text 光标） ── */
.custom-caret {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid var(--gold);
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
}

/* ── 压在滚动条上：金箭头与十字都不画 ──
   滚动条是浏览器自带控件（也拿不到 DOM 事件目标），用户要求那里不放任何光标；
   由 JS 切 body.cursor-hidden，两个光标 div 的内联 display 都要被压过 */
body.cursor-hidden .custom-crosshair,
body.cursor-hidden .custom-caret {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   自定义滚动条（全站统一）
   —— 关键：::-webkit-scrollbar 只设宽高时，Chrome 仍会保留
      原生「上下箭头按钮」(::-webkit-scrollbar-button)，
      在 Windows 经典滚动条下就是那一对很突兀的上下箭头。
      这里显式隐藏按钮，并把轨道/滑块统一为暗色金调。
   ═══════════════════════════════════════════════════════════ */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* ★ 去掉原生上下箭头按钮（textarea 拉长、内容溢出时不再出现） */
*::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

*::-webkit-scrollbar-track {
    background: rgba(var(--panel-rgb), 0.35);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(var(--gold-rgb), 0.45);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--system-rgb), 0.7);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* ★ 阻断 scrollbar-color 的继承。
   scrollbar-color 是「继承属性」：写在 html 上会一路传给所有后代，
   而标准属性一旦生效，Chrome 就不再采用上面的 ::-webkit-scrollbar 定制，
   内层滚动容器（picture 的画布视口、对话列表……）会退回 17px 原生滚动条——
   那两个突兀的上下箭头按钮就是这么冒出来的。显式重置为 auto 后，
   定制样式重新对所有元素生效；html/textarea 由下面的规则单独保留标准属性。 */
* {
    scrollbar-color: auto;
}

/* Firefox：细滚动条 + 同色系（无箭头按钮，原生即无） */
html, textarea {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--gold-rgb), 0.45) rgba(var(--panel-rgb), 0.35);
}