.btn-group { display: inline-flex; border-radius: var(--sm); overflow: hidden; }
.btn-group .btn { border-radius: 0; margin: 0; }
.btn-group .btn:first-child { border-radius: var(--sm) 0 0 var(--sm); }
.btn-group .btn:last-child { border-radius: 0 var(--sm) var(--sm) 0; }
.checkbox-label, .radio-label { display: inline-flex; align-items: center; gap: var(--sm); cursor: pointer; font-size: 0.8125rem; margin-bottom: var(--sm); }
.checkbox-custom, .radio-custom { width: 18px; height: 18px; border: 2px solid var(--text-3); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.radio-custom { border-radius: 50%; }
input[type=checkbox]:checked ~ .checkbox-custom, input[type=radio]:checked ~ .radio-custom { background: var(--blue); border-color: var(--blue); }
input[type=checkbox]:checked ~ .checkbox-custom::after { content: '✓'; color: #fff; font-size: 11px; }
input[type=radio]:checked ~ .radio-custom::after { content: ''; width: 8px; height: 8px; background: #fff; border-radius: 50%; }
input[type=checkbox], input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.dropdown { position: relative; display: inline-block; width: 100%; margin-bottom: var(--md); }
.dropdown-toggle { width: 100%; padding: var(--sm) var(--md); border-radius: var(--sm); background: var(--card-bg); display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; color: var(--text-1); }
.dropdown-toggle:hover { background: var(--hover); }
.dropdown-menu { position: absolute; top: calc(100% + var(--xs)); left: 0; right: 0; background: var(--card-bg); border-radius: var(--sm); z-index: 100; display: none; max-height: 200px; overflow-y: auto; }
.dropdown.open .dropdown-menu { display: block; }
.dropdown-item { width: 100%; padding: var(--sm) var(--md); text-align: left; font-size: 0.8125rem; color: var(--text-1); }
.dropdown-item:hover { background: var(--hover); }
.toggle-label { display: inline-flex; align-items: center; gap: var(--sm); cursor: pointer; }
.toggle-track { width: 44px; height: 24px; background: var(--text-3); border-radius: 12px; position: relative; }
.toggle-thumb { width: 20px; height: 20px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; }
input[type=checkbox]:checked ~ .toggle-track { background: var(--green); }
input[type=checkbox]:checked ~ .toggle-track .toggle-thumb { transform: translateX(20px); }
.file-upload-zone { display: block; border: 2px dashed var(--text-3); border-radius: var(--radius); padding: var(--xl); text-align: center; cursor: pointer; background: var(--card-bg); }
.file-upload-zone:hover { border-color: var(--blue); background: var(--blue-light); }
.upload-icon { font-size: 2rem; display: block; margin-bottom: var(--sm); }
.upload-text { color: var(--text-2); font-size: 0.8125rem; }
.list-group { list-style: none; margin: var(--md) 0; border-radius: var(--radius); overflow: hidden; background: var(--card-bg); }
.list-group-item { padding: var(--sm) var(--md); border-bottom: 1px solid var(--sep); font-size: 0.8125rem; }
.list-group-item:last-child { border-bottom: none; }
.list-group-item:hover { background: var(--hover); }
.list-group-item.active { background: var(--blue); color: #fff; }
.list-group-item a { text-decoration: none; color: inherit; display: block; }
.avatar { border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-light); color: var(--blue); font-weight: 700; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 32px; height: 32px; font-size: 0.7rem; }
.avatar-md { width: 48px; height: 48px; font-size: 0.8125rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1rem; }
.accordion { margin: var(--md) 0; border-radius: var(--radius); overflow: hidden; background: var(--card-bg); }
.accordion-item { border-bottom: 1px solid var(--sep); }
.accordion-item:last-child { border-bottom: none; }
.accordion-header { width: 100%; padding: var(--md); text-align: left; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 0.8125rem; color: var(--text-1); }
.accordion-header:hover { background: var(--hover); }
.accordion-body { padding: 0 var(--md) var(--md); font-size: 0.8125rem; line-height: 1.6; color: var(--text-2); }
.tabs { margin: var(--md) 0; background: var(--card-bg); border-radius: var(--radius); overflow: hidden; }
.tabs-nav { display: flex; border-bottom: 1px solid var(--sep); overflow-x: auto; }
.tab-btn { padding: var(--sm) var(--lg); font-size: 0.8125rem; font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab-btn:hover { color: var(--text-1); background: var(--hover); }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }
.tab-panel { padding: var(--md) var(--lg); font-size: 0.8125rem; line-height: 1.6; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--md); }
.modal-container { background: var(--card-bg); border-radius: var(--radius); width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--md) var(--lg); border-bottom: 1px solid var(--sep); }
.modal-header h3 { font-size: 1rem; margin: 0; }
.modal-close { font-size: 1.5rem; color: var(--text-2); padding: 0; line-height: 1; }
.modal-close:hover { color: var(--text-1); }
.modal-body { padding: var(--lg); font-size: 0.8125rem; line-height: 1.6; }
.toast { position: fixed; bottom: 20px; right: 20px; padding: var(--md) var(--lg); border-radius: var(--radius); color: #fff; font-size: 0.8125rem; z-index: 3000; display: flex; align-items: center; gap: var(--sm); }
.toast-info { background: var(--blue); }
.toast-success { background: var(--green); }
.toast-warning { background: var(--orange); }
.toast-error { background: var(--red); }
.divider { border: none; border-top: 1px solid var(--sep); margin: var(--lg) 0; }
.progress-track { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; margin: var(--md) 0; }
.progress-fill { height: 100%; border-radius: 4px; }
.progress-primary { background: var(--blue); }
.progress-success { background: var(--green); }
.tag { display: inline-block; padding: 2px var(--sm); border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-decoration: none; }
.tag-default { background: var(--bg); color: var(--text-2); }
.tag-info { background: var(--blue-light); color: var(--blue-dark); }
.back-to-top { position: fixed; bottom: var(--lg); right: var(--lg); width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 1rem; z-index: 900; display: flex; align-items: center; justify-content: center; }
.back-to-top:hover { background: var(--blue-dark); }
.back-to-top[hidden] { display: none; }
.code-block-wrapper { position: relative; margin: var(--md) 0; }
.copy-code-btn { position: absolute; top: var(--sm); right: var(--sm); background: var(--bg); padding: var(--xs) var(--sm); border-radius: 4px; font-size: 0.75rem; color: var(--text-2); }
.copy-code-btn:hover { background: var(--hover); color: var(--text-1); }
.code-block-wrapper pre { background: var(--text-1); color: #F2F2F7; padding: var(--md); border-radius: var(--radius); overflow-x: auto; font-size: 0.8125rem; line-height: 1.5; }
.table-responsive { overflow-x: auto; margin: var(--md) 0; border-radius: var(--radius); background: var(--card-bg); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.data-table th, .data-table td { padding: var(--sm) var(--md); text-align: left; border-bottom: 1px solid var(--sep); }
.data-table th { background: var(--bg); font-weight: 600; white-space: nowrap; }
.spoiler { background: var(--card-bg); border-radius: var(--radius); margin: var(--md) 0; overflow: hidden; }
.spoiler-title { padding: var(--md); cursor: pointer; font-weight: 600; font-size: 0.8125rem; list-style: none; display: flex; align-items: center; gap: var(--sm); user-select: none; color: var(--text-1); }
.spoiler-title:hover { background: var(--hover); }
.spoiler-title::-webkit-details-marker { display: none; }
.spoiler-content { padding: 0 var(--md) var(--md); font-size: 0.8125rem; line-height: 1.6; border-top: 1px solid var(--sep); padding-top: var(--sm); color: var(--text-2); }
.badge { display: inline-block; padding: 2px var(--sm); border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.badge-default { background: var(--bg); color: var(--text-2); }
.badge-info { background: var(--blue-light); color: var(--blue-dark); }
.styled-link { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.styled-link:hover { color: var(--blue-dark); }