/* ============================================================
   無界 AI｜UNBOUND 設計系統
   所有顏色一律由 :root 變數管理，頁面禁止寫死色碼（CLAUDE.md）
   ============================================================ */
:root {
    /* 底色（白底、簡潔專業） */
    --ub-bg: #ffffff;
    --ub-surface: #faf9fe;        /* 卡片底（極淡紫調） */
    --ub-surface-2: #f1eefb;      /* 卡片 hover / 次層 */
    --ub-border: #e5e1f2;

    /* 主色（紫） */
    --ub-primary: #6b4cf6;
    --ub-primary-strong: #5535e0;
    --ub-primary-soft: rgba(107, 76, 246, 0.10);

    /* 強調色（黃，CTA / 重點） */
    --ub-accent: #ffc933;
    --ub-accent-strong: #e0a800;  /* 白底上的黃色文字/數字用這個（可讀性） */
    --ub-accent-ink: #2a2200;     /* 黃底上的文字色 */

    /* 文字 */
    --ub-text: #1d1733;
    --ub-text-dim: #5f5880;
    --ub-text-faint: #9a94b8;

    /* 狀態 */
    --ub-success: #14a36d;
    --ub-warning: #d98a00;
    --ub-danger: #e0355c;
    --ub-info: #1690d4;

    /* 版面 */
    --ub-radius: 14px;
    --ub-radius-sm: 8px;
    --ub-shadow: 0 4px 16px rgba(29, 23, 51, 0.08);
    --ub-font: "Noto Sans TC", -apple-system, "PingFang TC", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--ub-bg);
    color: var(--ub-text);
    font-family: var(--ub-font);
    -webkit-font-smoothing: antialiased;
    /* 禁止雙擊縮放（iOS Safari 不吃 user-scalable，靠 touch-action 擋） */
    touch-action: manipulation;
}

a { color: var(--ub-primary); text-decoration: none; }

/* ---- 卡片 ---- */
.ub-card {
    background: var(--ub-surface);
    border: 1px solid var(--ub-border);
    border-radius: var(--ub-radius);
    padding: 16px;
    box-shadow: var(--ub-shadow);
}

/* ---- 按鈕 ---- */
.ub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border: none;
    border-radius: var(--ub-radius-sm);
    font-size: 15px;
    font-weight: 700;
    font-family: var(--ub-font);
    cursor: pointer;
    transition: filter 0.15s;
}
.ub-btn:active { filter: brightness(0.88); }

.ub-btn-primary { background: var(--ub-primary); color: #fff; }
.ub-btn-accent  { background: var(--ub-accent); color: var(--ub-accent-ink); }
.ub-btn-ghost   {
    background: transparent;
    color: var(--ub-text-dim);
    border: 1px solid var(--ub-border);
}

/* ---- 表單 ---- */
.ub-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--ub-surface-2);
    border: 1px solid var(--ub-border);
    border-radius: var(--ub-radius-sm);
    color: var(--ub-text);
    font-size: 15px;
    font-family: var(--ub-font);
}
.ub-input:focus {
    outline: none;
    border-color: var(--ub-primary);
    box-shadow: 0 0 0 3px var(--ub-primary-soft);
}

/* ---- 標籤 chip ---- */
.ub-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ub-primary-soft);
    color: var(--ub-primary);
    font-size: 13px;
    font-weight: 700;
}
.ub-chip-accent { background: rgba(255, 201, 51, 0.14); color: var(--ub-accent); }