/* =========================================
   gf-ui.css
   朵粒吧 / GF 设计系统基础变量
   目标：统一颜色、圆角、材质、阴影、灰阶、动效
   说明：
   1）这里只放“全局可复用”的设计变量与基础类
   2）不写具体业务页面布局
   3）发布弹层新增所需的 sheet / form / floating 变量也统一收口到这里
========================================= */

:root {
    /* =========================
       品牌
    ========================= */
    --gf-brand: #ffcc00;
    --gf-brand-strong: #f2cb06;
    --gf-brand-deep: #e7b900;
    --gf-brand-soft: rgba(255, 204, 0, 0.12);
    --gf-brand-soft-strong: rgba(255, 204, 0, 0.18);
    --gf-brand-border-soft: rgba(255, 204, 0, 0.22);
    /* =========================
       基础背景 / 文本
    ========================= */
    --gf-page-bg: #fbfbfd;
    --gf-surface: #ffffff;
    --gf-surface-soft: #f6f7f9;
    --gf-surface-softer: #f9f9fb;
    --gf-surface-button: #f4f4f5;
    --gf-surface-button-active: #ececef;
    --gf-surface-disabled: #f3f3f4;
    --gf-text-primary: #1c1c1e;
    --gf-text-strong: #111111;
    --gf-text-secondary: rgba(60, 60, 67, 0.62);
    --gf-text-tertiary: rgba(60, 60, 67, 0.48);
    --gf-text-quaternary: rgba(60, 60, 67, 0.42);
    --gf-text-light: #a5a5a5;
    --gf-text-lighter: #b5b5b5;
    --gf-text-lightest: #cacaca;
    --gf-text-disabled: #bdbdc2;
    /* =========================
       分割线 / 边界
    ========================= */
    --gf-border-soft: rgba(0, 0, 0, 0.045);
    --gf-border-softer: rgba(0, 0, 0, 0.028);
    --gf-border-strong: rgba(0, 0, 0, 0.08);
    --gf-border-material: rgba(255, 255, 255, 0.32);
    --gf-border-material-strong: rgba(255, 255, 255, 0.42);
    /* =========================
       圆角
    ========================= */
    --gf-radius-xs: 6px;
    --gf-radius-sm: 8px;
    --gf-radius-md: 10px;
    --gf-radius-lg: 14px;
    --gf-radius-xl: 18px;
    --gf-radius-card: 16px;
    --gf-radius-2xl: 22px;
    --gf-radius-3xl: 28px;
    --gf-radius-pill: 999px;
    /* =========================
       阴影
    ========================= */
    --gf-shadow-card: 0 6px 16px rgba(0, 0, 0, 0.035), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    --gf-shadow-card-pressed: 0 1px 3px rgba(0, 0, 0, 0.02);
    --gf-shadow-sticky: 0 6px 18px rgba(0, 0, 0, 0.025);
    --gf-shadow-material: 0 -8px 22px rgba(15, 23, 42, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.56);
    --gf-shadow-material-scrolling: 0 -10px 24px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.52);
    --gf-shadow-material-warm: 0 -8px 22px rgba(15, 23, 42, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.56), inset 0 8px 14px rgba(255, 204, 0, 0.022);
    --gf-shadow-material-warm-scrolling: 0 -10px 24px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 8px 14px rgba(255, 204, 0, 0.02);
    /* =========================
       薄玻璃 / Sheet 系统
       说明：
       这些变量服务于发布弹层、地图浮层、搜索浮层
    ========================= */
    --gf-overlay-bg: rgba(18, 18, 18, 0.26);
    --gf-sheet-bg: rgba(255, 255, 255, 0.82);
    --gf-sheet-bg-strong: rgba(255, 255, 255, 0.90);
    --gf-sheet-border: rgba(255, 255, 255, 0.44);
    --gf-sheet-blur: blur(24px) saturate(165%);
    --gf-sheet-shadow: 0 10px 40px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.56);
    --gf-sheet-shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.52);
    --gf-sheet-radius: 30px;
    --gf-sheet-radius-sm: 22px;
    --gf-sheet-handle: rgba(60, 60, 67, 0.18);
    /* =========================
       头部 / 底栏材质
    ========================= */
    --gf-material-header-bg: rgba(255, 255, 255, 0.48);
    --gf-material-header-border: rgba(255, 255, 255, 0.50);
    --gf-material-header-blur: blur(38px) saturate(210%);
    --gf-material-nav-bg: rgba(255, 255, 255, 0.40);
    --gf-material-nav-border: rgba(255, 255, 255, 0.54);
    --gf-material-nav-blur: blur(42px) saturate(215%);
    --gf-material-nav-scrolling-bg: rgba(255, 255, 255, 0.46);
    --gf-material-nav-scrolling-border: rgba(255, 255, 255, 0.56);
    --gf-material-nav-warm-bg: rgba(255, 253, 244, 0.42);
    --gf-material-nav-warm-border: rgba(255, 255, 255, 0.52);
    --gf-material-nav-warm-scrolling-bg: rgba(255, 252, 242, 0.48);
    --gf-material-nav-warm-scrolling-border: rgba(255, 255, 255, 0.54);
    --gf-material-search-bg: rgba(120, 120, 128, 0.09);
    /* =========================
       表单系统
       说明：
       发布页、设置页、轻表单都可以直接复用
    ========================= */
    --gf-field-label: var(--gf-text-primary);
    --gf-field-helper: var(--gf-text-tertiary);
    --gf-field-counter: var(--gf-text-tertiary);
    --gf-required: #ff5f57;
    --gf-input-bg: rgba(255, 255, 255, 0.78);
    --gf-input-bg-solid: #ffffff;
    --gf-input-border: rgba(17, 17, 17, 0.08);
    --gf-input-border-hover: rgba(17, 17, 17, 0.12);
    --gf-input-border-focus: rgba(255, 204, 0, 0.56);
    --gf-input-placeholder: #b9b9bf;
    --gf-input-shadow-focus: 0 0 0 4px rgba(255, 204, 0, 0.10); 
    --gf-option-bg: rgba(255, 255, 255, 0.78);
    --gf-option-bg-hover: rgba(255, 255, 255, 0.92);
    --gf-option-border: rgba(17, 17, 17, 0.06);
    --gf-option-selected-bg: rgba(255, 247, 214, 0.84);
    --gf-option-selected-border: rgba(240, 188, 0, 0.90);
    --gf-option-selected-text: #232323;
    --gf-option-disabled-bg: rgba(244, 244, 246, 0.96);
    --gf-option-disabled-border: rgba(17, 17, 17, 0.03);
    --gf-option-disabled-text: #b8b8be;
    /* =========================
       地图 / 浮板 / 搜索
    ========================= */
    --gf-floating-panel-bg: rgba(255, 255, 255, 0.86);
    --gf-floating-panel-bg-strong: rgba(255, 255, 255, 0.94);
    --gf-floating-panel-border: rgba(255, 255, 255, 0.48);
    --gf-floating-panel-shadow: 0 10px 26px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.64);
    --gf-search-panel-bg: rgba(255, 255, 255, 0.92);
    --gf-search-panel-border: rgba(255, 255, 255, 0.52);
    --gf-search-panel-shadow: 0 10px 28px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.66);
    /* =========================
       字号 / 字重
    ========================= */
    --gf-font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --gf-font-size-xs: 11px;
    --gf-font-size-sm: 12px;
    --gf-font-size-md: 14px;
    --gf-font-size-lg: 15px;
    --gf-font-size-xl: 16px;
    --gf-font-size-2xl: 17px;
    --gf-font-size-3xl: 18px;
    --gf-font-size-4xl: 20px;
    --gf-font-size-5xl: 22px;
    --gf-font-weight-medium: 500;
    --gf-font-weight-medium-plus: 540;
    --gf-font-weight-semibold: 580;
    --gf-font-weight-strong: 600;
    --gf-font-weight-bold: 620;
    /* =========================
   补充：更完整的字号层级
   说明：
   让发布弹层 / 轻表单 / 编辑页不再写死 px
========================= */
    --gf-font-size-2xs: 11px;
    --gf-font-size-xs: 12px;
    --gf-font-size-sm: 13px;
    --gf-font-size-md: 14px;
    --gf-font-size-lg: 15px;
    --gf-font-size-xl: 16px;
    --gf-font-size-2xl: 17px;
    --gf-font-size-3xl: 18px;
    --gf-font-size-4xl: 20px;
    --gf-font-size-5xl: 22px;
    /* =========================
   补充：统一控件高度
   说明：
   chip / 轻按钮 / 分段选项统一收口
========================= */
    --gf-control-height-xs: 32px;
    --gf-control-height-sm: 36px;
    --gf-control-height-md: 40px;
    --gf-control-height-lg: 44px;
    --gf-control-height-xl: 52px;
    /* =========================
   补充：更轻的选中态（贴近你想要的闲鱼 / iOS clean）
========================= */
    --gf-option-selected-bg-soft: rgba(255, 204, 0, 0.16);
    --gf-option-selected-border-soft: rgba(255, 204, 0, 0.24);


    /* =========================
       间距
    ========================= */
    --gf-space-1: 4px;
    --gf-space-2: 8px;
    --gf-space-3: 12px;
    --gf-space-4: 16px;
    --gf-space-5: 20px;
    --gf-space-6: 24px;
    --gf-space-7: 28px;
    --gf-space-8: 32px;
    /* =========================
       动效
    ========================= */
    --gf-duration-fast: .16s;
    --gf-duration-normal: .20s;
    --gf-duration-slow: .26s;
    --gf-duration-sheet: .30s;
    --gf-ease-default: cubic-bezier(.22, .61, .36, 1);
    --gf-ease-sheet: cubic-bezier(.2, .9, .2, 1);
}

/* =========================================
   基础文档
========================================= */
html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--gf-page-bg);
    color: var(--gf-text-strong);
    font-family: var(--gf-font-family);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    overflow-x: hidden;
}

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

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
    font-family: inherit;
}

button {
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

input,
textarea,
select {
    outline: none;
    border: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}

textarea {
    resize: none;
}

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

a {
    color: inherit;
    text-decoration: none;
}

[hidden] {
    display: none !important;
}

/* =========================================
   可复用材质类
========================================= */
.gf-material-header {
    background: var(--gf-material-header-bg);
    border-bottom: 1px solid var(--gf-material-header-border);
    backdrop-filter: var(--gf-material-header-blur);
    -webkit-backdrop-filter: var(--gf-material-header-blur);
}

.gf-material-nav {
    background: var(--gf-material-nav-bg);
    border-top: 1px solid var(--gf-material-nav-border);
    backdrop-filter: var(--gf-material-nav-blur);
    -webkit-backdrop-filter: var(--gf-material-nav-blur);
    box-shadow: var(--gf-shadow-material);
}

    .gf-material-nav.is-scrolling {
        background: var(--gf-material-nav-scrolling-bg);
        border-top-color: var(--gf-material-nav-scrolling-border);
        box-shadow: var(--gf-shadow-material-scrolling);
    }

    .gf-material-nav.is-warm {
        background: var(--gf-material-nav-warm-bg);
        border-top-color: var(--gf-material-nav-warm-border);
        box-shadow: var(--gf-shadow-material-warm);
    }

        .gf-material-nav.is-warm.is-scrolling {
            background: var(--gf-material-nav-warm-scrolling-bg);
            border-top-color: var(--gf-material-nav-warm-scrolling-border);
            box-shadow: var(--gf-shadow-material-warm-scrolling);
        }

/* =========================================
   通用玻璃 / 浮层基类
========================================= */
.gf-glass {
    background: var(--gf-sheet-bg);
    border: 1px solid var(--gf-sheet-border);
    backdrop-filter: var(--gf-sheet-blur);
    -webkit-backdrop-filter: var(--gf-sheet-blur);
    box-shadow: var(--gf-sheet-shadow-soft);
}

.gf-floating-panel {
    background: var(--gf-floating-panel-bg);
    border: 1px solid var(--gf-floating-panel-border);
    backdrop-filter: var(--gf-sheet-blur);
    -webkit-backdrop-filter: var(--gf-sheet-blur);
    box-shadow: var(--gf-floating-panel-shadow);
}

/* =========================================
   常用小组件基类
========================================= */
.gf-pill-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--gf-radius-pill);
    background: var(--gf-surface-button);
    color: #4d4d4d;
    font-size: var(--gf-font-size-sm);
    font-weight: var(--gf-font-weight-strong);
    transition: transform var(--gf-duration-fast) var(--gf-ease-default), background-color var(--gf-duration-fast) var(--gf-ease-default), color var(--gf-duration-fast) var(--gf-ease-default), border-color var(--gf-duration-fast) var(--gf-ease-default), box-shadow var(--gf-duration-fast) var(--gf-ease-default);
}

    .gf-pill-button:active {
        transform: scale(0.96);
        background: var(--gf-surface-button-active);
    }

.gf-card {
    background: var(--gf-surface);
    border-radius: var(--gf-radius-xl);
    box-shadow: var(--gf-shadow-card);
}

    .gf-card.is-pressed,
    .gf-card:active {
        box-shadow: var(--gf-shadow-card-pressed);
    }

/* =========================================
   通用表单基类
========================================= */
.gf-input-shell {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 18px;
    border-radius: var(--gf-radius-xl);
    background: var(--gf-input-bg);
    border: 1px solid var(--gf-input-border);
    transition: border-color var(--gf-duration-fast) var(--gf-ease-default), box-shadow var(--gf-duration-fast) var(--gf-ease-default), background-color var(--gf-duration-fast) var(--gf-ease-default);
}

    .gf-input-shell:hover {
        border-color: var(--gf-input-border-hover);
    }

    .gf-input-shell:focus-within {
        border-color: var(--gf-input-border-focus);
        box-shadow: var(--gf-input-shadow-focus);
        background: var(--gf-input-bg-solid);
    }

.gf-input,
.gf-textarea {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--gf-text-primary);
}

    .gf-input::placeholder,
    .gf-textarea::placeholder {
        color: var(--gf-input-placeholder);
    }

.gf-option-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 0 22px;
    border-radius: var(--gf-radius-xl);
    background: var(--gf-option-bg);
    border: 1px solid var(--gf-option-border);
    transition: transform var(--gf-duration-fast) var(--gf-ease-default), background-color var(--gf-duration-fast) var(--gf-ease-default), border-color var(--gf-duration-fast) var(--gf-ease-default), box-shadow var(--gf-duration-fast) var(--gf-ease-default);
}

    .gf-option-card:active {
        transform: scale(0.995);
    }

    .gf-option-card.is-selected {
        background: var(--gf-option-selected-bg);
        border-color: var(--gf-option-selected-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
    }

    .gf-option-card.is-disabled {
        background: var(--gf-option-disabled-bg);
        border-color: var(--gf-option-disabled-border);
        color: var(--gf-option-disabled-text);
    }

.gf-segment-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    height: 46px;
    padding: 0 18px;
    border-radius: var(--gf-radius-lg);
    background: var(--gf-surface-button);
    border: 1px solid rgba(17, 17, 17, 0.05);
    color: var(--gf-text-secondary);
    font-size: var(--gf-font-size-xl);
    font-weight: var(--gf-font-weight-medium-plus);
    transition: transform var(--gf-duration-fast) var(--gf-ease-default), background-color var(--gf-duration-fast) var(--gf-ease-default), border-color var(--gf-duration-fast) var(--gf-ease-default), color var(--gf-duration-fast) var(--gf-ease-default), box-shadow var(--gf-duration-fast) var(--gf-ease-default);
}

    .gf-segment-button:hover {
        background: #f0f0f2;
    }

    .gf-segment-button:active {
        transform: scale(0.97);
    }

    .gf-segment-button.is-selected {
        background: var(--gf-brand);
        border-color: rgba(255, 204, 0, 0.98);
        color: #ffffff;
        box-shadow: 0 8px 18px rgba(255, 204, 0, 0.22);
    }

    .gf-segment-button.is-muted-selected {
        background: rgba(255, 247, 214, 0.94);
        border-color: var(--gf-option-selected-border);
        color: var(--gf-text-primary);
        box-shadow: none;
    }

    .gf-segment-button.is-disabled {
        background: var(--gf-surface-disabled);
        border-color: rgba(17, 17, 17, 0.03);
        color: var(--gf-text-disabled);
        cursor: not-allowed;
        box-shadow: none;
    }

/* =========================================
   通用图标容器
========================================= */
.gf-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
}

    .gf-icon svg {
        width: 100%;
        height: 100%;
        display: block;
    }


/* =========================================
   Skills / Talent Tree
   追加：技能模块语义变量
   说明：
   1）只补充，不改现有变量
   2）用于 talent-tree-sheet / skill-quick-add / skill-edit
========================================= */
:root {
    /* 技能页背景与卡片 */
    --gf-skill-page-bg: #f6f7fa;
    --gf-skill-card-bg: rgba(255, 255, 255, 0.92);
    --gf-skill-card-bg-muted: rgba(255, 255, 255, 0.78);
    --gf-skill-card-border: rgba(17, 17, 17, 0.04);
    --gf-skill-card-border-strong: rgba(17, 17, 17, 0.06);
    --gf-skill-card-shadow: 0 6px 18px rgba(15, 23, 42, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    /* 技能标题与辅助文案 */
    --gf-skill-title: #151517;
    --gf-skill-title-muted: rgba(28, 28, 30, 0.72);
    --gf-skill-section-title: rgba(60, 60, 67, 0.62);
    --gf-skill-helper: rgba(60, 60, 67, 0.46);
    /* 主状态 badge */
    --gf-skill-badge-default-bg: rgba(255, 204, 0, 0.12);
    --gf-skill-badge-default-border: rgba(255, 204, 0, 0.24);
    --gf-skill-badge-default-text: #bc9100;
    --gf-skill-badge-hidden-bg: rgba(120, 120, 128, 0.08);
    --gf-skill-badge-hidden-border: rgba(120, 120, 128, 0.16);
    --gf-skill-badge-hidden-text: rgba(60, 60, 67, 0.54);
    /* 搜索结果 / 列表项 */
    --gf-skill-option-bg: rgba(255, 255, 255, 0.76);
    --gf-skill-option-border: rgba(17, 17, 17, 0.05);
    --gf-skill-option-selected-bg: rgba(255, 248, 220, 0.7);
    --gf-skill-option-selected-border: rgba(255, 204, 0, 0.34);
    --gf-skill-option-text: #1c1c1e;
    /* 顶部操作 */
    --gf-skill-toolbar-icon-bg: rgba(255, 255, 255, 0.42);
    --gf-skill-toolbar-icon-border: rgba(255, 255, 255, 0.54);
    --gf-skill-toolbar-save-bg: #ffcc00;
    --gf-skill-toolbar-save-text: #111111;
    --gf-skill-toolbar-save-shadow: 0 8px 18px rgba(255, 204, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.26);
    /* 管理态轻按钮 */
    --gf-skill-action-bg: rgba(255, 255, 255, 0.84);
    --gf-skill-action-border: rgba(17, 17, 17, 0.06);
    --gf-skill-action-text: rgba(60, 60, 67, 0.72);
    --gf-skill-action-selected-bg: rgba(255, 248, 220, 0.78);
    --gf-skill-action-selected-border: rgba(255, 204, 0, 0.28);
    --gf-skill-action-selected-text: #8f6d00;
}

/* ===============================
   Tip 提示弹窗
   =============================== */

.tip-mask {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.tip-box {
    width: 72%;
    max-width: 320px;
    background: var(--dlb-bg);
    border-radius: var(--dlb-radius-lg);
    padding: 20px;
    text-align: center;
    animation: tipIn .18s ease;
    box-shadow: var(--dlb-shadow-pop);
}

.tip-text {
    font-size: 15px;
    line-height: 1.6;
}

.tip-actions {
    display: flex;
    margin-top: 18px;
    gap: 12px;
}

    .tip-actions button {
        flex: 1;
        border: none;
        border-radius: var(--dlb-radius-md); /* ✅ 按钮圆角统一 */
        padding: 10px 0;
        cursor: pointer;
    }

/* 你原本的 ok/cancel & success/error 保留 */
.tip-ok {
    background: var(--dlb-danger);
    color: #fff;
}

.tip-cancel {
    background: #eee;
}

.tip-success .tip-text {
    color: #28a745;
}

.tip-error .tip-text {
    color: #dc3545;
}

@keyframes tipIn {
    from {
        transform: scale(.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}



/* ===============================
   GF Chip
   全站唯一轻胶囊系统
================================ */

/* ===============================
   GF Chip
   全站唯一轻胶囊系统
   目标：小、薄、轻、像内容标签，不像按钮
================================ */

.gf-chip {
    position: relative;
    min-height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(17, 24, 39, 0.038);
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.92), rgba(250, 250, 252, 0.82) );
    color: rgba(75, 85, 99, 0.82);
    font-size: 12px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 1px 2px rgba(17, 24, 39, 0.018);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

    .gf-chip:active {
        transform: scale(0.97);
    }

    .gf-chip--selected,
    .gf-chip.is-selected,
    .gf-chip[aria-pressed="true"],
    .gf-chip[aria-selected="true"] {
        border-color: rgba(255, 204, 0, 0.18);
        background: linear-gradient( 180deg, rgba(255, 252, 238, 0.96), rgba(255, 248, 214, 0.72) );
        color: rgba(31, 41, 55, 0.88);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 1px 4px rgba(255, 204, 0, 0.055);
    }

.gf-chip--sm {
    min-height: 26px;
    padding: 0 11px;
    font-size: 12px;
}

.gf-chip--md {
    min-height: 29px;
    padding: 0 13px;
    font-size: 13px;
}

.gf-chip--muted,
.gf-chip--neutral {
    border-color: rgba(17, 24, 39, 0.034);
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.82), rgba(246, 247, 249, 0.72) );
    color: rgba(107, 114, 128, 0.68);
}

.gf-chip--brand {
    border-color: rgba(255, 204, 0, 0.12);
    background: linear-gradient( 180deg, rgba(255, 252, 242, 0.88), rgba(255, 248, 220, 0.58) );
    color: rgba(90, 90, 95, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 1px 3px rgba(255, 204, 0, 0.03);
}

.gf-chip--disabled,
.gf-chip:disabled,
.gf-chip[disabled] {
    opacity: 0.48;
    pointer-events: none;
}