/* ============================================================
 * 喵娘工具屋 · 全站设计令牌与共享组件（唯一来源）
 * 所有页面统一引用本文件；页面私有样式只消费令牌（var(--xxx)），
 * 不再各自硬编码色值 / 圆角 / 阴影 / 字体。
 * ============================================================ */

:root {
    /* ---- 色板 ---- */
    --bg-page: #fff8fb;            /* 奶油粉底 */
    --bg-card: #ffffff;
    --pink: #ff9ecd;
    --pink-deep: #ff7ab8;
    --pink-light: #ffe4f1;
    --pink-soft: #fff0f7;
    --purple: #a78bfa;
    --purple-deep: #8b5cf6;
    --blue-mac: #8ed1ff;           /* 马卡龙蓝 */
    --green-mac: #a8e6a8;          /* 马卡龙绿 */
    --orange-mac: #ffc288;         /* 马卡龙橙 */
    --yellow-mac: #ffd66e;         /* 马卡龙黄 */

    /* ---- 语义色（萌化但保留状态辨识度） ---- */
    --success: #4cd97b;
    --warning: #ffb84d;
    --error: #ff6b81;
    --info: #8ed1ff;

    /* ---- 文字 ---- */
    --text: #6b4a6a;
    --text-light: #a98aa7;
    --text-strong: #4a2f49;

    /* ---- 边框 / 阴影 ---- */
    --border: #ffe4f1;
    --border-strong: #f3d7e6;
    --shadow-soft: 0 4px 16px rgba(255, 158, 205, .18);
    --shadow-hover: 0 8px 24px rgba(255, 122, 184, .28);

    /* ---- 圆角刻度（全站仅 4 档） ---- */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-pill: 999px;

    /* ---- 动效 ---- */
    --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
    --transition: .25s var(--ease-bounce);

    /* ---- 字体 ---- */
    --font-cute: 'ZCOOL KuaiLe', 'M PLUS Rounded 1c', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-mono: 'Cascadia Code', 'SF Mono', Consolas, monospace;
}

/* ---------- 按钮 ---------- */
.nyaa-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px; border: none; cursor: pointer;
    border-radius: var(--r-md); font-size: .9rem; font-weight: 600;
    font-family: var(--font-cute);
    color: #fff; background: linear-gradient(135deg, var(--pink), var(--pink-deep));
    box-shadow: var(--shadow-soft); transition: all var(--transition);
}
.nyaa-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.nyaa-btn:active { transform: scale(.96); }
.nyaa-btn:disabled { background: #f3d7e6; cursor: not-allowed; transform: none; box-shadow: none; }
.nyaa-btn--ghost { background: #fff; color: var(--pink-deep); border: 1.5px solid var(--border-strong); box-shadow: none; }

/* ---------- 卡片 ---------- */
.nyaa-card {
    background: var(--bg-card); border-radius: var(--r-lg);
    border: 1px solid var(--border); box-shadow: var(--shadow-soft);
    transition: box-shadow var(--transition);
}
.nyaa-card:hover { box-shadow: var(--shadow-hover); }

/* ---------- 输入框 ---------- */
.nyaa-input {
    padding: 10px 14px; border: 2px solid var(--border-strong);
    border-radius: var(--r-sm); font-size: .95rem; color: var(--text-strong);
    outline: none; background: #fff; transition: all var(--transition);
}
.nyaa-input:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255, 158, 205, .25); }

/* ---------- 表格 ---------- */
.nyaa-table { width: 100%; border-collapse: collapse; }
.nyaa-table thead th {
    background: var(--pink-light); color: var(--text-strong);
    padding: 11px 14px; text-align: left; position: sticky; top: 0;
}
.nyaa-table tbody td { padding: 9px 14px; border-bottom: 1px solid var(--border); }
.nyaa-table tbody tr:hover { background: var(--pink-soft); }
.nyaa-table .mono { font-family: var(--font-mono); }

/* ---------- 进度条 ---------- */
.nyaa-progress { height: 10px; background: var(--pink-light); border-radius: var(--r-pill); overflow: hidden; }
.nyaa-progress__fill {
    height: 100%; width: 0; border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--pink), var(--purple));
    transition: width .3s ease;
}

/* ---------- 空状态 ---------- */
.nyaa-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 40px 20px; color: var(--text-light); text-align: center;
}
.nyaa-empty svg { width: 44px; height: 44px; stroke: var(--border-strong); fill: none; stroke-width: 1.6; margin-bottom: 4px; }
.nyaa-empty--warn svg { stroke: var(--warning); }
.nyaa-empty--warn { color: #b0885e; }

/* ---------- 通知 toast（右上角可堆叠，由 js/common.js 创建 DOM） ---------- */
.nyaa-toast-box {
    position: fixed; top: 20px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px; max-width: 92vw;
}
.nyaa-toast {
    display: grid; grid-template-columns: 34px 1fr 24px; align-items: start;
    width: 320px; padding: 14px 16px; background: #fff;
    border-radius: var(--r-md); border-left: 4px solid var(--info);
    box-shadow: var(--shadow-hover);
    opacity: 0; transform: translateX(120%);
    transition: all .35s var(--ease-bounce);
}
.nyaa-toast--in { opacity: 1; transform: translateX(0); }
.nyaa-toast--out { opacity: 0; transform: translateX(120%); }
.nyaa-toast__icon {
    width: 24px; height: 24px; border-radius: 50%; text-align: center;
    line-height: 24px; font-weight: 700; font-size: 13px; color: #fff; background: var(--info);
}
.nyaa-toast__content { padding: 0 10px; min-width: 0; }
.nyaa-toast__title { font-weight: 700; font-size: .9rem; color: var(--text-strong); word-break: break-all; }
.nyaa-toast__body { font-size: .8rem; color: var(--text); line-height: 1.5; margin-top: 2px; word-break: break-all; }
.nyaa-toast__body strong { color: var(--text-strong); }
.nyaa-toast__close {
    border: none; background: transparent; cursor: pointer;
    color: var(--text-light); font-size: .95rem; padding: 2px 4px; border-radius: var(--r-sm);
}
.nyaa-toast__close:hover { background: var(--pink-light); color: var(--text-strong); }
.nyaa-toast--success { border-left-color: var(--success); }
.nyaa-toast--success .nyaa-toast__icon { background: var(--success); }
.nyaa-toast--warning { border-left-color: var(--warning); }
.nyaa-toast--warning .nyaa-toast__icon { background: var(--warning); }
.nyaa-toast--error { border-left-color: var(--error); }
.nyaa-toast--error .nyaa-toast__icon { background: var(--error); }
.nyaa-toast--info { border-left-color: var(--info); }
.nyaa-toast--info .nyaa-toast__icon { background: var(--info); }

/* ---------- 通用隐藏工具类 ---------- */
.nyaa-hidden { display: none !important; }