.btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.5;
    border-radius: var(--radius);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), box-shadow var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;

}

.btn:focus-visible {

    outline: 2px solid var(--role-accent, #16a34a);
    outline-offset: 2px;

}

.btn img {

    width: 16px;
    height: 16px;
    flex-shrink: 0;

}

.btn-xs {

    padding: 2px var(--sp-2);
    font-size: var(--text-xs);
    height: 24px;

}

.btn-sm {

    padding: var(--sp-1) var(--sp-3);
    font-size: var(--text-xs);

}

.btn-lg {

    padding: var(--sp-3) var(--sp-6);
    font-size: var(--text-base);

}

.btn-primary {

    background: var(--role-accent, #16a34a);
    color: #fff;
    border-color: var(--role-accent, #16a34a);

}

.btn-primary:hover {

    background: var(--role-accent-hover, #15803d);
    border-color: var(--role-accent-hover, #15803d);

}

.btn-secondary {

    background: #fff;
    color: var(--gray-700);
    border-color: var(--gray-300);

}

.btn-secondary:hover {

    background: var(--gray-50);
    border-color: var(--gray-400);

}

.btn-blue {

    background: #2563eb;
    color: #fff;
    border-color: #2563eb;

}

.btn-blue:hover {

    background: #1d4ed8;
    border-color: #1d4ed8;

}

.btn-green {

    background: #16a34a;
    color: #fff;
    border-color: #16a34a;

}

.btn-green:hover {

    background: #15803d;
    border-color: #15803d;

}

.btn-danger {

    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);

}

.btn-danger:hover {

    background: #b91c1c;
    border-color: #b91c1c;

}

.btn-ghost {

    background: transparent;
    color: var(--gray-600);
    border-color: transparent;

}

.btn-ghost:hover {
    background: var(--gray-100);
}

.btn-icon {

    padding: var(--sp-2);
    width: 36px;
    height: 36px;

}

.btn-icon.btn-sm {

    width: 28px;
    height: 28px;
    padding: var(--sp-1);

}

.btn-block {
    width: 100%;
}

.form-group {

    display: flex;
    flex-direction: column;
    gap: var(--sp-1);

}

.form-label {

    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--gray-700);

}

.form-label-required::after {

    content: " *";
    color: var(--color-danger);

}

.form-input,
.form-select,
.form-textarea {

    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--text-sm);
    color: var(--gray-900);
    background: #fff;
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius);
    line-height: 1.5;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;

}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--gray-400);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {

    outline: none;
    border-color: var(--role-accent, #16a34a);
    box-shadow: 0 0 0 3px rgba(22,163,74,.12);

}

.form-input[readonly] {

    background: var(--gray-50);
    cursor: default;

}

.form-input-sm {

    padding: 4px var(--sp-2);
    font-size: var(--text-xs);
    height: 30px;

}

.form-textarea {

    resize: vertical;
    min-height: 90px;

}

.form-input-wrapper {
    position: relative;
}

.form-input-wrapper .form-input {
    padding-right: var(--sp-10);
}

.form-input-toggle {

    position: absolute;
    right: var(--sp-3);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    color: var(--gray-400);

}

.form-input-toggle img {

    width: 18px;
    height: 18px;
    filter: brightness(0) saturate(100%) opacity(0.5);

}

.form-checkbox-wrapper {

    display: flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    user-select: none;

}

.form-checkbox {

    width: 16px;
    height: 16px;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-sm);
    appearance: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast);

}

.form-checkbox:checked {

    background: var(--role-accent, #16a34a);
    border-color: var(--role-accent, #16a34a);

}

.form-checkbox:checked::after {

    content: "";
    position: absolute;
    left: 3px;
    top: 0px;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);

}

.form-checkbox-label {

    font-size: var(--text-sm);
    color: var(--gray-700);

}

.form-checkbox-disabled {
    cursor: not-allowed;
}

.form-checkbox-disabled:checked {

    background: var(--gray-400);
    border-color: var(--gray-400);

}

.form-radio-group {

    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;

}

.form-radio-option {

    display: flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    user-select: none;

}

.form-radio {

    width: 16px;
    height: 16px;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-full);
    appearance: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color var(--transition-fast);

}

.form-radio:checked {
    border-color: var(--role-accent, #16a34a);
}

.form-radio:checked::after {

    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 8px; height: 8px;
    background: var(--role-accent, #16a34a);
    border-radius: var(--radius-full);

}

.form-radio-label {

    font-size: var(--text-sm);
    color: var(--gray-700);

}

.form-help {

    font-size: var(--text-xs);
    color: var(--gray-500);

}

.form-error {

    font-size: var(--text-xs);
    color: var(--color-danger);

}

.form-divider {

    height: 1px;
    background: var(--gray-200);
    margin: var(--sp-2) 0;

}

.badge {

    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    white-space: nowrap;

}

.badge-success,
.badge-representative {

    background: var(--color-success-light);
    color: var(--color-success);

}

.badge-warning {

    background: var(--color-warning-light);
    color: var(--color-warning);

}

.badge-danger {

    background: var(--color-danger-light);
    color: var(--color-danger);

}

.badge-info,
.badge-manager {

    background: var(--color-info-light);
    color: var(--color-info);

}

.badge-neutral {

    background: var(--gray-100);
    color: var(--gray-600);

}

.badge-purple,
.badge-admin {

    background: #f3e8ff;
    color: #7e22ce;

}

.badge-owner {

    background: #fef3c7;
    color: #b45309;

}

.badge-get {

    background: #dcfce7;
    color: #15803d;
    font-family: var(--font-mono);

}

.badge-post {

    background: #dbeafe;
    color: #1d4ed8;
    font-family: var(--font-mono);

}

.badge-put {

    background: #fef3c7;
    color: #b45309;
    font-family: var(--font-mono);

}

.badge-patch {

    background: #ede9fe;
    color: #6d28d9;
    font-family: var(--font-mono);

}

.badge-delete {

    background: #fee2e2;
    color: #b91c1c;
    font-family: var(--font-mono);

}

.table-container {

    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    background: #fff;
    box-shadow: var(--shadow-sm);

}

.data-table {

    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);

}

.data-table thead {

    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);

}

.data-table th {

    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;

}

.data-table td {

    padding: var(--sp-3) var(--sp-4);
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;

}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: var(--gray-50);
}

.table-actions {

    display: flex;
    align-items: center;
    gap: var(--sp-1);

}

.card {

    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);

}

.card-header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--gray-100);

}

.card-title {

    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--gray-900);

}

.modal-overlay {

    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);

}

.modal-overlay.open {

    opacity: 1;
    visibility: visible;

}

.modal {

    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(.95) translateY(8px);
    transition: transform var(--transition);

}

.modal-overlay.open .modal {
    transform: scale(1) translateY(0);
}

.modal-lg {
    max-width: 680px;
}

.modal-header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--gray-200);

}

.modal-title {

    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--gray-900);

}

.modal-close-btn {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);

}

.modal-close-btn:hover {
    background: var(--gray-100);
}

.modal-close-btn img {

    width: 18px;
    height: 18px;
    filter: brightness(0) opacity(.5);

}

.modal-body {

    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);

}

.modal-footer {

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;

}

.modal-footer-left {
    margin-right: auto;
}

.content-section {

    display: flex;
    flex-direction: column;
    gap: var(--sp-6);

}

.section-title {

    font-size: var(--text-base);
    font-weight: 600;
    color: var(--gray-900);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--sp-2);

}

.empty-state {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-16) var(--sp-8);
    text-align: center;
    color: var(--gray-400);
    gap: var(--sp-3);

}

.empty-state-icon {

    width: 48px;
    height: 48px;
    opacity: .4;

}

.empty-state-text {
    font-size: var(--text-sm);
}

.tag-list {

    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);

}

.tag {

    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;

}

.tag-remove {

    width: 14px;
    height: 14px;
    cursor: pointer;
    opacity: .5;
    transition: opacity var(--transition-fast);

}

.tag-remove:hover {
    opacity: 1;
}

.toggle-switch {

    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;

}

.toggle-switch input {

    opacity: 0;
    width: 0;
    height: 0;

}

.toggle-slider {

    position: absolute;
    inset: 0;
    background: var(--gray-300);
    border-radius: 11px;
    cursor: pointer;
    transition: background var(--transition);

}

.toggle-slider::before {

    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: var(--radius-full);
    transition: transform var(--transition);
    box-shadow: var(--shadow-sm);

}

input:checked + .toggle-slider {
    background: var(--role-accent, #16a34a);
}

input:checked + .toggle-slider::before {
    transform: translateX(18px);
}

.icon-select {

    position: relative;
    display: inline-block;
    width: 100%;

}

.icon-select-trigger {

    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--text-sm);
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius);
    background: #fff;
    color: var(--gray-700);
    cursor: pointer;
    height: 38px;
    min-width: 180px;
    user-select: none;
    white-space: nowrap;
    transition: border-color var(--transition-fast);

}

.icon-select-trigger:hover {
    border-color: var(--gray-400);
}

.icon-select-trigger.open {

    border-color: var(--role-accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);

}

.icon-select-icon {

    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;

}

.icon-select-label {

    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;

}

.icon-select-chevron {

    margin-left: auto;
    font-size: 16px !important;
    color: var(--gray-400);
    flex-shrink: 0;
    transition: transform var(--transition-fast);

}

.icon-select-trigger.open .icon-select-chevron {
    transform: rotate(180deg);
}

.icon-select-dropdown {

    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 300;
    padding: var(--sp-1) 0;
    max-height: 280px;
    overflow-y: auto;

}

.icon-select-dropdown.open {
    display: block;
}

.icon-select-option {

    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--text-sm);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
    white-space: nowrap;

}

.icon-select-option:hover {
    background: var(--gray-50);
}

.icon-select-option.selected {

    background: var(--role-accent-light, #eff6ff);
    color: var(--role-accent, #2563eb);

}

.icon-select-option img {

    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;

}

.http-method {

    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;

}

.http-get    { color: #15803d; }
.http-post   { color: #1d4ed8; }
.http-put    { color: #b45309; }
.http-patch  { color: #6d28d9; }
.http-delete { color: #b91c1c; }

.method-select {

    position: relative;
    display: inline-block;

}

.method-select-trigger {

    display: inline-flex;
    align-items: center;
    padding: var(--sp-1) var(--sp-3);
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    transition: border-color var(--transition-fast);
    height: 38px;

}

.method-select-trigger:hover {
    border-color: var(--gray-400);
}

.method-select-trigger.open {
    border-color: var(--role-accent, #2563eb);
}

.method-select-dropdown {

    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    z-index: 300;
    min-width: 100%;
    padding: var(--sp-1) 0;
    display: none;

}

.method-select-dropdown.open {
    display: block;
}

.method-select-option {

    display: flex;
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    transition: background var(--transition-fast);

}

.method-select-option:hover {
    background: var(--gray-50);
}

.method-select-option.selected {
    background: var(--gray-100);
}