.tackle-page {background-color: #f0f2f5;min-height: 100vh;padding-bottom: 80px;overflow-x: hidden}
.ts-container {max-width: 780px;margin: 0 auto;padding: 24px 16px 40px;box-sizing: border-box;width: 100%}
.ts-hero {display: flex;align-items: center;justify-content: space-between;gap: 16px;background: #ffffff;border-radius: 16px;border: 1px solid #e2e8f0;box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 0 0 0 transparent;padding: 22px 24px;margin-bottom: 28px}
.ts-hero-body {display: flex;flex-direction: column;gap: 6px;min-width: 0}
.ts-hero-title-row {display: flex;align-items: center;gap: 10px;flex-wrap: wrap}
.ts-hero-title {font-size: 1.55rem;font-weight: 700;color: #0f172a;margin: 0;letter-spacing: -0.02em}
.ts-hero-desc {margin: 0;font-size: 13px;color: var(--color-text-muted);line-height: 1.6}
.ts-hero-action {flex-shrink: 0}
.ts-count-badge {display: inline-flex;align-items: center;gap: 2px;padding: 4px 10px;background: #f1f5f9;border: 1px solid #e2e8f0;border-radius: 999px;font-size: 12px;font-weight: 600;color: #475569;white-space: nowrap}
.ts-count-current {color: #1877f2}
.ts-count-divider {color: #cbd5e1;margin: 0 1px}
.ts-count-max {color: #94a3b8}
.ts-btn-primary {display: inline-flex;align-items: center;gap: 6px;padding: 10px 18px;background: #1877f2;color: #fff;border: none;border-radius: 8px;font-size: 14px;font-weight: 600;text-decoration: none;cursor: pointer;transition: background-color 0.15s, transform 0.1s;white-space: nowrap;max-width: 100%;box-sizing: border-box}
.ts-btn-primary:hover {background: #1565d8}
.ts-btn-primary:active {transform: scale(0.97)}
.ts-limit-badge {display: inline-flex;align-items: center;gap: 6px;padding: 10px 14px;background: #f8fafc;border: 1px solid #e2e8f0;border-radius: 8px;font-size: 13px;font-weight: 500;color: #64748b;white-space: nowrap}
.ts-list {display: flex;flex-direction: column;gap: 20px}
.ts-card {background: #ffffff;border-radius: 14px;border: 1px solid #e2e8f0;box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);overflow: hidden;transition: box-shadow 0.2s, border-color 0.2s}
.ts-card:hover {border-color: #c7d7f5;box-shadow: 0 6px 20px rgba(15, 23, 42, 0.09)}
.ts-card-header {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 16px 20px;border-bottom: 1px solid #f1f5f9;background: #fafbfd;cursor: pointer;user-select: none;transition: background-color 0.15s}
.ts-card-header:hover {background: #f5f7fa}
.ts-card-title-group {display: flex;align-items: center;gap: 10px;min-width: 0;flex: 1}
.ts-card-name {font-size: 1rem;font-weight: 700;color: #0f172a;margin: 0;min-width: 0;overflow-wrap: anywhere}
.ts-card-chevron {font-size: 12px;color: #94a3b8;transition: transform 0.25s ease;flex-shrink: 0}
.ts-card.is-open .ts-card-chevron {transform: rotate(180deg)}
.ts-card .ts-card-body {display: none}
.ts-card.is-open .ts-card-body {display: flex}
.ts-card.is-open .ts-card-header {border-bottom: 1px solid #f1f5f9}
.ts-card:not(.is-open) .ts-card-header {border-bottom: none}
.ts-card-actions {display: flex;gap: 4px;flex-shrink: 0}
.ts-icon-btn {display: inline-flex;align-items: center;justify-content: center;width: 36px;height: 36px;min-width: 36px;border-radius: 8px;background: transparent;border: none;cursor: pointer;color: #64748b;transition: background-color 0.15s, color 0.15s;padding: 0}
.ts-icon-btn svg {width: 16px;height: 16px;flex-shrink: 0}
.ts-icon-btn--edit {color: #1877f2}
.ts-icon-btn--edit:hover {background: #eff6ff;color: #1565d8}
.ts-icon-btn--delete:hover {background: #fef2f2;color: #ef4444}
.ts-card-actions form {display: inline-flex;margin: 0;padding: 0}
.ts-card-body {padding: 16px 20px;display: flex;flex-direction: column;gap: 20px}
.ts-type-group {display: flex;flex-direction: column;gap: 8px}
.ts-type-label {display: inline-flex;align-items: center;gap: 5px;font-size: 11px;font-weight: 700;color: #1877f2;letter-spacing: 0.04em;text-transform: uppercase;padding-bottom: 2px}
.ts-type-icon {width: 13px;height: 13px;flex-shrink: 0}
.ts-type-items {display: flex;flex-direction: column;gap: 6px}
.ts-item {padding: 11px 14px;background: #f8fafc;border-radius: 10px;border: 1px solid #f1f5f9;display: flex;flex-direction: column;gap: 0;transition: border-color 0.15s}
.ts-item:hover {border-color: #dbeafe}
.ts-item-main {display: flex;align-items: center;justify-content: space-between;gap: 10px;min-width: 0}
.ts-item-info {display: flex;flex-direction: column;gap: 2px;min-width: 0;flex: 1}
.ts-item-name {font-size: 14px;font-weight: 600;color: #1e293b;min-width: 0;overflow-wrap: anywhere;line-height: 1.4}
.ts-item-maker {font-size: 12px;color: #94a3b8;min-width: 0;overflow-wrap: anywhere}
.ts-item-right {display: flex;align-items: center;gap: 6px;flex-shrink: 0}
.ts-usage-chip {font-size: 11px;font-weight: 500;color: #1877f2;background: #eff6ff;border: 1px solid #dbeafe;border-radius: 999px;padding: 3px 8px;white-space: nowrap}
.ts-edit-item-btn {display: inline-flex;align-items: center;justify-content: center;width: 28px;height: 28px;min-width: 28px;border-radius: 6px;color: #94a3b8;text-decoration: none;transition: color 0.15s, background-color 0.15s}
.ts-edit-item-btn:hover {color: #1877f2;background: #eff6ff}
.ts-edit-item-btn i {font-size: 11px}
.ts-item-details {display: flex;flex-direction: column;gap: 5px;margin: 10px 0 0;padding: 10px 0 0;border-top: 1px solid #e2e8f0}
.ts-item-details dd {margin: 0}
.ts-detail-row {display: flex;align-items: baseline;gap: 8px;min-width: 0}
.ts-detail-label {display: inline-flex;align-items: center;gap: 4px;font-size: 11px;font-weight: 600;color: #94a3b8;white-space: nowrap;flex-shrink: 0}
.ts-detail-label i {font-size: 10px;color: #cbd5e1}
.ts-detail-value {font-size: 13px;color: #334155;line-height: 1.5;min-width: 0;overflow-wrap: anywhere;white-space: pre-wrap}
.ts-empty-item-notice {display: flex;align-items: center;gap: 8px;padding: 13px 16px;background: #f8fafc;border: 1px dashed #e2e8f0;border-radius: 10px;font-size: 13px;color: #94a3b8}
.ts-empty-state {display: flex;flex-direction: column;align-items: center;text-align: center;padding: 64px 24px;background: #ffffff;border-radius: 16px;border: 1px solid #e2e8f0}
.ts-empty-icon {width: 72px;height: 72px;display: flex;align-items: center;justify-content: center;background: #f1f5f9;border-radius: 50%;font-size: 30px;color: #94a3b8;margin-bottom: 20px}
.ts-empty-title {font-size: 16px;font-weight: 600;color: #334155;margin: 0 0 8px}
.ts-empty-hint {font-size: 13px;color: #94a3b8;margin: 0 0 24px;line-height: 1.6}
.ts-empty-state .ts-btn-primary {margin-top: 4px}
@media (max-width: 600px) {.ts-container {padding: 16px 12px 32px}
.ts-hero {flex-direction: column;align-items: flex-start;padding: 16px;gap: 14px;margin-bottom: 20px}
.ts-hero-title {font-size: 1.35rem}
.ts-hero-action {width: 100%}
.ts-btn-primary {width: 100%;justify-content: center}
.ts-list {gap: 14px}
.ts-card-header {padding: 13px 14px}
.ts-card-name {font-size: 0.95rem}
.ts-card-body {padding: 14px;gap: 16px}
.ts-item {padding: 10px 12px}
.ts-item-name {font-size: 13px}
.ts-detail-row {flex-direction: column;gap: 2px}
.ts-detail-value {font-size: 12px;padding-left: 0}
.ts-empty-state {padding: 48px 16px}}
.tackle-container {max-width: 800px;margin: 0 auto;padding: 20px;overflow-x: hidden;box-sizing: border-box;width: 100%}
.tackle-form-container {max-width: 780px;padding: 24px 16px 40px}
.page-header--tackle-form {display: flex;align-items: center;justify-content: space-between;gap: 16px;background: #ffffff;border-radius: 16px;border: 1px solid #e2e8f0;box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);padding: 22px 24px;margin-bottom: 24px}
.page-header-main {display: flex;flex-direction: column;gap: 6px;min-width: 0}
.page-header-title-row {display: flex;align-items: center;gap: 10px;flex-wrap: wrap}
.page-header-title-row h1 {font-size: 1.55rem;font-weight: 700;color: #0f172a;margin: 0;letter-spacing: -0.02em}
.page-header-chip {display: inline-flex;align-items: center;padding: 4px 10px;border-radius: 999px;background: #f1f5f9;border: 1px solid #e2e8f0;color: #475569;font-size: 11px;font-weight: 600}
.page-header-subtitle {margin: 0;font-size: 13px;color: #64748b;line-height: 1.6}
.btn {display: inline-flex;align-items: center;gap: 6px;padding: 10px 16px;border-radius: 6px;font-size: 14px;font-weight: 500;text-decoration: none;cursor: pointer;transition: background-color 0.2s, transform 0.1s;border: none;max-width: 100%;box-sizing: border-box}
.btn:active {transform: scale(0.98)}
.btn-primary {background-color: #1877f2;color: #fff}
.btn-primary:hover {background-color: #166fe5}
.btn-outline {background-color: #fff;color: #1d4ed8;border: 1px solid #d6e7ff}
.btn-outline:hover {background-color: #eef5ff;border-color: #bfdbfe}
.btn-ghost {background-color: var(--color-bg-muted);color: var(--color-text-secondary);border: 1px solid var(--color-border)}
.btn-ghost:hover {background-color: #eef2f7;border-color: #cbd5e1}
.btn-xs {padding: 6px 10px;font-size: 12px;border-radius: 999px}
.btn-icon {display: inline-flex;align-items: center;justify-content: center;width: 36px;height: 36px;border-radius: 50%;background-color: transparent;border: none;cursor: pointer;color: #65676b;transition: background-color 0.2s, color 0.2s}
.btn-icon svg {width: 18px;height: 18px}
.btn-icon:hover {background-color: #f0f2f5}
.btn-icon.btn-edit {color: #1877f2}
.btn-icon.btn-edit:hover {background-color: #e7f3ff}
.btn-icon.btn-delete {color: #65676b}
.btn-icon.btn-delete:hover {background-color: #ffebe6;color: #fa383e}
.tackle-type-icon {width: 20px;height: 20px;color: #1877f2}
.tackle-items-grid {display: flex;flex-direction: column;gap: 8px}
.tackle-item-card {display: flex;justify-content: space-between;align-items: center;background-color: #fff;padding: 12px 16px;border-radius: 8px;border: 1px solid #e7e9ee;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);transition: box-shadow 0.2s, border-color 0.2s}
.tackle-item-card:hover {border-color: #d7dbe3;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08)}
.tackle-item-info {display: flex;flex-direction: column;gap: 2px}
.tackle-manufacturer {font-size: 12px;color: #65676b}
.tackle-name {font-size: 15px;font-weight: 500;color: #1c1e21}
.tackle-original-name {font-size: 12px;color: #8a8d91}
.tackle-set-items {display: flex;flex-direction: column;padding: 16px 20px;gap: 16px}
.item-type-icon {width: 14px;height: 14px}
.item-type-label {display: inline-flex;align-items: center;gap: 4px;font-size: 12px;font-weight: 500;color: #1d4ed8;background-color: #eef5ff;padding: 4px 10px;border-radius: 999px;border: 1px solid #d6e7ff;min-width: 60px;text-align: center}
.back-link-container {margin-top: 28px;text-align: center}
.back-link {display: inline-flex;align-items: center;gap: 6px;color: #64748b;text-decoration: none;font-size: 14px;padding: 8px 16px;border-radius: 8px;transition: color 0.15s, background-color 0.15s}
.back-link:hover {color: #1877f2;background: #f1f5f9;text-decoration: none}
.tackle-form-page .login-container {max-width: 500px}
.form-title {font-size: 1.25rem;font-weight: 600;color: #1c1e21;margin-bottom: 24px;text-align: center}
.form-select {width: 100%;padding: 12px 14px;border: 1px solid #e2e8f0;border-radius: 10px;font-size: 16px;background-color: #fff;cursor: pointer;box-sizing: border-box;transition: border-color 0.2s, box-shadow 0.2s}
.form-select:focus {outline: none;border-color: #1877f2;box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.12)}
.form-input {width: 100%;padding: 12px 14px;border: 1px solid #e2e8f0;border-radius: 10px;font-size: 16px;background-color: #fff;box-sizing: border-box;transition: border-color 0.2s, box-shadow 0.2s}
.form-input:focus {outline: none;border-color: #1877f2;box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.12)}
.form-textarea {resize: vertical;min-height: 80px;font-family: inherit;font-weight: normal}
.tackle-add-form {display: flex;flex-direction: column;gap: 20px}
.tackle-form-page .page-header h1 {font-size: 1.55rem;font-weight: 700;color: #0f172a;margin: 0}
.page-header-tackle-info {display: flex;align-items: center;flex-wrap: wrap;gap: 8px;margin-top: 8px;padding: 8px 12px;background: #f7f8fa;border-radius: 8px;border: 1px solid #e4e6eb;min-width: 0}
.page-header-tackle-name {font-size: 14px;font-weight: 500;color: #1c1e21;min-width: 0;overflow-wrap: anywhere}
.tackle-form-page .tackle-filter-grid {gap: 14px;padding: 18px}
.tackle-form-page .tackle-filter-item {background-color: var(--color-bg-muted);border: 1px solid #edf1f7;border-radius: 12px;padding: 12px}
.tackle-form-page .tackle-product-select {padding: 18px}
.tackle-form-page .tackle-result-count {display: inline-flex;align-self: flex-end;padding: 4px 10px;border-radius: 999px;background-color: #eef5ff;color: #1877f2;font-weight: 600;border: 1px solid #d6e7ff}
.tackle-form-page .custom-toggle-label {background: #f8fafc;border: 1px solid #e2e8f0;border-radius: 10px}
.tackle-form-page .custom-toggle-label:hover {background: #eff6ff;border-color: #dbeafe}
.tackle-form-page .tackle-form-section {animation: tackleFadeUp 0.35s ease both}
@keyframes tackleFadeUp {from {opacity: 0;transform: translateY(8px)}
to {opacity: 1;transform: translateY(0)}}
@media (prefers-reduced-motion: reduce) {.tackle-form-page .tackle-form-section {animation: none}}
.tackle-sections-wrapper {display: flex;flex-direction: column;gap: 16px}
.tackle-form-section {background: #ffffff;border-radius: 14px;border: 1px solid #e2e8f0;box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);overflow: hidden;transition: box-shadow 0.2s, border-color 0.2s}
.tackle-form-section:hover {border-color: #c7d7f5;box-shadow: 0 6px 20px rgba(15, 23, 42, 0.09)}
.tackle-form-section-header {display: flex;align-items: center;gap: 12px;padding: 16px 20px;background: #fafbfd;border-bottom: 1px solid #f1f5f9}
.section-icon {display: flex;align-items: center;justify-content: center;width: 32px;height: 32px;background: linear-gradient(135deg, #eff6ff, #dbeafe);border: 1px solid #bfdbfe;border-radius: 8px;color: #1877f2;font-size: 14px;flex-shrink: 0}
.section-title {font-size: 15px;font-weight: 700;color: #0f172a}
.section-header-text {display: flex;flex-direction: column;gap: 3px;min-width: 0}
.section-subtitle {font-size: 12px;color: #94a3b8}
.tackle-section-body {padding: 18px 20px;display: flex;flex-direction: column;gap: 14px}
.section-title-row {display: flex;align-items: center;gap: 8px}
.selection-count {display: inline-flex;align-items: center;padding: 3px 9px;border-radius: 999px;background: #eff6ff;border: 1px solid #dbeafe;color: #1877f2;font-size: 11px;font-weight: 600}
.btn-ghost-danger {color: #dc2626;border-color: #fecaca;background-color: #fef2f2;border-radius: 6px;font-size: 11px;padding: 5px 10px}
.btn-ghost-danger:hover {background-color: #fee2e2;border-color: #fca5a5;color: #b91c1c}
.tackle-inline-note {margin: 0;font-size: 12px;color: var(--color-text-muted)}
.tackle-section-actions {display: flex;justify-content: flex-start;padding-top: 4px}
.tackle-section-actions .btn-outline {border-radius: 8px;font-size: 13px;padding: 8px 14px;border: 1px solid #e2e8f0;color: #475569;background: #ffffff;transition: border-color 0.15s, background-color 0.15s, color 0.15s}
.tackle-section-actions .btn-outline:hover {border-color: #1877f2;color: #1877f2;background: #eff6ff}
.tackle-filter-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 12px;padding: 16px}
.tackle-filter-item {display: flex;flex-direction: column;gap: 8px}
.tackle-filter-item--wide {grid-column: 1 / -1}
.filter-label {display: flex;align-items: center;gap: 6px;font-size: 13px;font-weight: 500;color: #65676b}
.filter-icon-wrapper {display: flex;align-items: center;justify-content: center;width: 20px;height: 20px;color: #1877f2}
.filter-icon {width: 16px;height: 16px}
.tackle-product-select {padding: 16px}
.tackle-form-page .tackle-product-select {display: flex;flex-direction: column;gap: 12px}
.tackle-search-field {display: flex;flex-direction: column;gap: 6px;margin-bottom: 0}
.tackle-search-input {position: relative}
.tackle-search-input i {position: absolute;left: 12px;top: 50%;transform: translateY(-50%);color: #8a8d91;font-size: 13px}
.tackle-search-input .form-input {padding-left: 34px}
.tackle-product-field {display: flex;flex-direction: column;gap: 8px}
.tackle-result-count {margin-top: 10px;font-size: 12px;color: #65676b;text-align: right}
.product-label {display: block;font-size: 13px;font-weight: 500;color: #65676b;margin-bottom: 8px}
.product-select {font-size: 15px}
.tackle-personal-fields,
.tackle-custom-fields {padding: 16px;display: flex;flex-direction: column;gap: 16px}
.tackle-personal-fields .form-field,
.tackle-custom-fields .form-field {margin-bottom: 0}
.field-label {display: flex;align-items: center;gap: 6px;font-size: 13px;font-weight: 600;color: #334155;margin-bottom: 8px}
.field-label i {color: #1877f2;font-size: 12px}
.field-hint {display: block;font-size: 12px;color: #8a8d91;margin-top: 4px}
.field-hint--public {color: #b45309;font-weight: 500}
.field-hint--public i {margin-right: 2px}
.form-actions {margin-top: 12px}
.form-actions .btn {width: 100%;justify-content: center;padding: 14px 20px;font-size: 15px;font-weight: 600;border-radius: 10px;box-shadow: 0 4px 12px rgba(24, 119, 242, 0.2)}
.form-actions .btn-disabled,
.form-actions .btn:disabled {background-color: #bcc0c4;color: #fff;cursor: not-allowed;opacity: 0.7}
.form-actions .btn-disabled:hover,
.form-actions .btn:disabled:hover {background-color: #bcc0c4}
.tackle-type-badge {display: inline-block;font-size: 12px;font-weight: 500;color: #1877f2;background-color: #e7f3ff;padding: 2px 8px;border-radius: 4px;width: fit-content}
.tackle-select-group {display: flex;flex-direction: column;gap: 6px;max-height: 240px;overflow-y: auto;padding: 4px;background: #f8fafc;border-radius: 10px;border: 1px solid #f1f5f9}
.tackle-option-row {display: flex;align-items: center;gap: 8px;padding: 10px 14px;background: #ffffff;border-radius: 10px;border: 1px solid #f1f5f9;transition: border-color 0.15s, background-color 0.15s}
.tackle-option-row:hover {border-color: #dbeafe;background: #fafcff}
.tackle-option-row .tackle-checkbox-label {flex: 1;padding: 0;background-color: transparent;border-radius: 0}
.tackle-option-row .btn {flex-shrink: 0}
.tackle-option-row .tackle-checkbox-label:hover {background-color: transparent}
.tackle-checkbox-label {display: flex;align-items: center;gap: 10px;padding: 10px 14px;background: #ffffff;border-radius: 10px;cursor: pointer;transition: background-color 0.15s}
.tackle-checkbox-label:hover {background-color: #f8fafc}
.tackle-checkbox-label input[type="checkbox"],
.tackle-checkbox-label input[type="radio"] {width: 18px;height: 18px;cursor: pointer;accent-color: #1877f2}
.tackle-checkbox-label input[type="checkbox"]:checked + .tackle-checkbox-text,
.tackle-checkbox-label input[type="radio"]:checked + .tackle-checkbox-text {color: #1877f2}
.tackle-checkbox-label input[type="checkbox"]:checked + .tackle-checkbox-text .name,
.tackle-checkbox-label input[type="radio"]:checked + .tackle-checkbox-text .name {font-weight: 600;color: #1877f2}
.tackle-checkbox-text {display: flex;flex-direction: column;gap: 2px;min-width: 0}
.tackle-checkbox-text .manufacturer {font-size: 12px;color: #94a3b8}
.tackle-checkbox-text .name {font-size: 14px;color: #1e293b;overflow-wrap: anywhere}
.empty-notice {font-size: 13px;color: #94a3b8;padding: 16px;text-align: center}
.tackle-set-select {display: flex;flex-direction: column;gap: 8px}
.tackle-set-option {display: flex;align-items: center;gap: 10px;padding: 10px 12px;background-color: #f7f8fa;border-radius: 6px;cursor: pointer;transition: background-color 0.2s}
.tackle-set-option:hover {background-color: #e7f3ff}
.tackle-set-info {display: flex;flex-direction: column;gap: 2px;flex: 1;min-width: 0}
.tackle-set-info .tackle-set-name {font-size: 14px;font-weight: 500;color: #1c1e21}
.tackle-set-info .tackle-set-summary {font-size: 12px;color: #65676b}
.tackle-items-grid-edit {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 4px;margin-top: 6px}
.tackle-item-card-edit {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 3px;padding: 6px 4px;background: #fff;border-radius: 6px;border: 1px solid #e4e6eb;min-width: 0;height: 56px;justify-content: center}
.tackle-item-icon-edit {flex-shrink: 0;width: 22px;height: 22px;display: flex;align-items: center;justify-content: center;background: #f7f8fa;border-radius: 4px}
.tackle-card-icon-edit {width: 14px;height: 14px;fill: #65676b}
.tackle-item-name-edit {font-size: 11px;font-weight: 600;color: #1c1e21;line-height: 1.3;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden}
.used-tackle-section {border-top: 1px solid #e0e0e0;padding-top: 10px;margin-top: 5px}
.used-tackle-section h3 {font-size: 1.1em;margin-bottom: 8px;color: #1c1e21}
.tackle-set-display {background-color: #f0f2f5;padding: 8px;border-radius: 6px;margin-bottom: 8px}
.tackle-set-display:last-child {margin-bottom: 0}
.tackle-set-display .tackle-set-name {font-weight: bold;font-size: 0.9em;color: #606770;display: block;margin-bottom: 8px}
.custom-toggle-section {padding: 16px}
.custom-toggle-label {display: flex;align-items: center;gap: 12px;cursor: pointer;padding: 12px 16px;background-color: #f7f8fa;border-radius: 8px;transition: background-color 0.2s}
.custom-toggle-label:hover {background-color: #e7f3ff}
.custom-toggle-label input[type="checkbox"] {width: 20px;height: 20px;accent-color: #1877f2;cursor: pointer;flex-shrink: 0}
.custom-toggle-text {display: flex;align-items: center;gap: 8px;font-size: 14px;font-weight: 500;color: #1c1e21}
.custom-toggle-text i {color: #1877f2;font-size: 14px}
.hidden {display: none !important}
.section-disabled {opacity: 0.5;pointer-events: none}
.section-disabled .form-input,
.section-disabled .form-textarea {background-color: #f0f2f5;cursor: not-allowed}
.required-mark {color: #fa383e;margin-left: 2px}
@media (max-width: 768px) {.tackle-container {padding: 16px 12px 32px}
.tackle-form-container {padding: 16px 12px 32px}
.tackle-filter-grid {grid-template-columns: 1fr}
.page-header--tackle-form {flex-direction: column;align-items: flex-start;gap: 10px;padding: 16px}
.page-header-title-row h1 {font-size: 1.35rem}
.page-header-tackle-info {flex-wrap: wrap;gap: 6px;padding: 6px 10px}
.page-header-tackle-name {font-size: 13px;word-break: break-word;min-width: 0}
.tackle-form-section-header {padding: 14px 16px}
.tackle-section-body {padding: 14px 16px}
.tackle-personal-fields,
.tackle-custom-fields {padding: 14px;gap: 14px}
.tackle-form-page .form-select,
.tackle-form-page .form-input,
.tackle-form-page .form-textarea {font-size: 16px;padding: 12px}
.field-hint {font-size: 11px}
.tackle-form-page .tackle-filter-grid {padding: 14px}
.tackle-form-page .tackle-product-select {padding: 14px}
.tackle-option-row {padding: 8px 10px}
.tackle-checkbox-text .name {font-size: 13px}
.tackle-checkbox-text .manufacturer {font-size: 11px}
.form-actions .btn {font-size: 14px;padding: 12px 16px}}