/* ========================================================
 *  超自然行动组 · 通用基础样式
 *  - 全站默认变量、布局、按钮、卡片
 *  - 与超自然行动组复古贴纸暗黑游戏风做全局统一
 * ====================================================== */

:root {
    /* 主色 - 贴纸风格里的亮色 */
    --gp-primary:      #ffb02a;
    --gp-primary-d:    #e09a0b;
    --gp-secondary:    #ff5b3a;
    --gp-accent:       #6c5ce7;

    /* 文字 */
    --gp-text:         #1f1f23;
    --gp-text-muted:   #6e6e76;
    --gp-text-soft:    #9a9aa2;

    /* 背景 */
    --gp-bg:           #f5f3ec;          /* 复古卡其 */
    --gp-bg-soft:      #ece7d8;
    --gp-bg-card:      #ffffff;

    /* 暗黑系（聊天页用） */
    --gp-dark-bg:      #1a1a23;
    --gp-dark-bg-2:    #252533;
    --gp-dark-card:    #2c2c3a;
    --gp-dark-text:    #f5f5f5;
    --gp-dark-line:    #3c3c4a;

    /* 边 */
    --gp-border:       #1f1f23;
    --gp-border-w:     3px;
    --gp-shadow-stk:   4px 4px 0 0 var(--gp-border);
    --gp-shadow-stk-mb:3px 3px 0 0 var(--gp-border);

    --gp-radius:       10px;
    --gp-radius-lg:    16px;

    --gp-font: "Inter", "PingFang SC", "Microsoft YaHei", "Heiti SC", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: var(--gp-font);
    color: var(--gp-text);
    background: var(--gp-bg);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* 强制锁定 PC 视图：最小宽度固定，禁止移动端自适应挤压/换行 */
    min-width: 1200px;
    overflow-x: auto;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gp-secondary); }

img { max-width: 100%; display: block; }

/* 通用容器 */
.gp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 贴纸风格按钮 */
.gp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 22px;
    border-radius: var(--gp-radius);
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-primary);
    color: var(--gp-text);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: var(--gp-shadow-stk);
    transition: transform .12s ease, box-shadow .12s ease;
    user-select: none;
}
.gp-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--gp-border); }
.gp-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--gp-border); }
.gp-btn:disabled,
.gp-btn[disabled] {
    background: #ccc;
    cursor: not-allowed;
    color: #777;
    box-shadow: 2px 2px 0 0 #888;
}

.gp-btn--block { width: 100%; }
.gp-btn--ghost { background: transparent; }
.gp-btn--danger { background: var(--gp-secondary); color: #fff; }

/* 通用卡片 */
.gp-card {
    background: var(--gp-bg-card);
    border: var(--gp-border-w) solid var(--gp-border);
    border-radius: var(--gp-radius-lg);
    box-shadow: var(--gp-shadow-stk);
    padding: 24px;
}

/* 通用输入 */
.gp-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 2px solid #d7d2c2;
    background: #fff;
    border-radius: var(--gp-radius);
    font-size: 14px;
    color: var(--gp-text);
    transition: border-color .15s ease;
}
.gp-input:focus {
    outline: none;
    border-color: var(--gp-primary);
}

/* 表单 hint/error */
.gp-form-msg {
    margin-top: 6px;
    font-size: 12px;
    color: var(--gp-text-muted);
    min-height: 16px;
}
.gp-form-msg--err { color: var(--gp-secondary); }

/* 标签 */
.gp-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--gp-text-muted);
}

/* 通用栅格 */
.gp-row { display: flex; flex-wrap: wrap; gap: 16px; }
.gp-row > * { flex: 1 1 200px; }

/* Alert toast（极简） */
.gp-toast {
    position: fixed; left: 50%; top: 32px; transform: translateX(-50%);
    background: #1f1f23; color: #fff;
    padding: 10px 18px; border-radius: 30px;
    font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.18);
    z-index: 9999; opacity: 0; pointer-events: none;
    transition: opacity .25s ease, top .25s ease;
}
.gp-toast.show { opacity: 1; top: 56px; }

/* 通用文字工具 */
.gp-muted { color: var(--gp-text-muted); }
.gp-center { text-align: center; }