<template>
}


/* 通用按钮 */
.ghost-btn {
border-radius: 999px;
border: 1px solid rgba(143, 154, 183, 0.5);
background: transparent;
font-size: 12px;
padding: 4px 10px;
cursor: pointer;
color: #4b536c;
}


.ghost-btn-xs {
padding: 2px 8px;
font-size: 11px;
}


.primary-btn {
border-radius: 999px;
border: none;
background: #2f7cf6;
color: #ffffff;
font-size: 12px;
padding: 5px 12px;
cursor: pointer;
}


.primary-chip {
border-radius: 999px;
border: none;
background: var(--primary-soft);
color: var(--primary);
font-size: 12px;
padding: 5px 10px;
cursor: pointer;
}


/* toggle */
.toggle {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-sub);
}


.toggle input {
display: none;
}


.toggle-slider {
position: relative;
width: 32px;
height: 18px;
border-radius: 999px;
background: #d3d8e6;
}


.toggle-slider::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
transition: transform 0.18s ease;
}


.toggle input:checked + .toggle-slider {
background: #2f7cf6;
}


.toggle input:checked + .toggle-slider::after {
transform: translateX(14px);
}
</style>