.tackle-page {background-color: #f0f2f5;min-height: 100vh;padding-bottom: 80px;overflow-x: hidden}
.tackle-container {max-width: 800px;margin: 0 auto;padding: 20px;overflow-x: hidden;box-sizing: border-box;width: 100%}
.tackle-hero {display: grid;grid-template-columns: 1fr auto;gap: 16px;padding: 20px 22px;background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%);border-radius: 18px;border: 1px solid #e3e8f4;box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);margin-bottom: 24px}
.tackle-hero-main {display: flex;flex-direction: column;gap: 8px;min-width: 0}
.tackle-hero-title-row {display: flex;align-items: center;gap: 12px;flex-wrap: wrap}
.tackle-hero-title-row h1 {font-size: 1.7rem;font-weight: 700;color: #0f172a;margin: 0}
.tackle-hero-subtitle {margin: 0;font-size: 13px;color: #64748b}
.tackle-hero-actions {display: flex;flex-direction: column;align-items: flex-end;justify-content: center;gap: 10px;text-align: right}
.tackle-page:not(.tackle-form-page) .page-header {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;margin-bottom: 24px;gap: 12px;background: #fff;padding: 16px 18px;border-radius: 14px;border: 1px solid #e5e7eb;box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08)}
.page-header--tackle {align-items: flex-start}
.page-header--tackle-form {display: flex;align-items: flex-start;justify-content: space-between;gap: 12px}
.page-header-main {display: flex;flex-direction: column;gap: 6px}
.page-header-title-row {display: flex;align-items: center;gap: 12px;flex-wrap: wrap}
.page-header-chip {display: inline-flex;align-items: center;padding: 4px 10px;border-radius: 999px;background: #eef5ff;border: 1px solid #d6e7ff;color: #1d4ed8;font-size: 11px;font-weight: 600}
.page-header-subtitle {margin: 0;font-size: 13px;color: #65676b}
.tackle-count-badge {display: inline-flex;align-items: center;gap: 6px;padding: 8px 12px;background-color: #fff;border-radius: 999px;border: 1px solid #e4e6eb;color: #1c1e21;font-size: 12px;font-weight: 600}
.tackle-count-label {color: #65676b;font-weight: 500}
.tackle-count-number {font-size: 13px}
.tackle-count-separator {color: #8a8d91}
.tackle-count-limit {color: #1c1e21}
.tackle-container .page-header .btn {flex-shrink: 0}
.tackle-container .page-header h1 {font-size: 1.5rem;font-weight: 600;color: #1c1e21;margin: 0}
.limit-reached-badge {display: inline-flex;align-items: center;padding: 8px 14px;background-color: #f0f2f5;color: #65676b;font-size: 13px;font-weight: 500;border-radius: 6px;border: 1px solid #dddfe2}
.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: #f8fafc;color: #475569;border: 1px solid #e2e8f0}
.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-sets-list {display: grid;grid-template-columns: 1fr;gap: 16px}
.tackle-set-card {background-color: #fff;padding: 18px;border-radius: 16px;border: 1px solid #e5e7eb;box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);display: flex;flex-direction: column;gap: 14px;transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s}
.tackle-set-card:hover {border-color: #cbd5f5;box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);transform: translateY(-2px)}
.tackle-set-header {display: flex;justify-content: space-between;align-items: flex-start;gap: 12px}
.tackle-set-title-group {display: flex;flex-direction: column;gap: 4px;min-width: 0}
.tackle-set-name {font-size: 1.1rem;font-weight: 600;color: #1c1e21;margin: 0}
.tackle-set-actions {display: flex;gap: 4px}
.tackle-set-items {display: flex;flex-direction: column;gap: 12px}
.tackle-set-item-group {background: #f8fafc;border: 1px solid #e2e8f0;border-radius: 12px;padding: 10px;display: flex;flex-direction: column;gap: 8px}
.tackle-set-item-group.is-empty {background: #f9fafb;border-style: dashed}
.tackle-set-item-header {display: flex;align-items: center;justify-content: space-between;gap: 8px}
.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}
.tackle-set-item-list {display: flex;flex-direction: column;gap: 6px}
.tackle-set-item {display: flex;flex-direction: column;gap: 2px}
.tackle-set-item-row {display: flex;align-items: center;justify-content: space-between;gap: 8px;min-width: 0}
.item-name-group {display: flex;flex-direction: column;gap: 2px;min-width: 0}
.item-type-icon {width: 14px;height: 14px}
.tackle-set-item .item-name {font-size: 14px;color: #1c1e21;min-width: 0}
.item-subname {font-size: 12px;color: #94a3b8;line-height: 1.4}
.item-row-actions {display: flex;align-items: center;gap: 6px;flex-shrink: 0}
.item-usage-count {font-size: 11px;color: #64748b;background-color: #f1f5f9;border-radius: 999px;padding: 2px 8px;white-space: nowrap}
.btn-icon-sm.btn-edit-item {display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;border-radius: 6px;color: #94a3b8;transition: color 0.15s, background-color 0.15s}
.btn-icon-sm.btn-edit-item:hover {color: #3b82f6;background-color: #eff6ff}
.item-memo {font-size: 12px;color: #64748b;font-style: normal}
.item-rating {display: flex;flex-direction: column;gap: 2px;margin-top: 4px}
.item-rating-label {font-size: 10px;color: #94a3b8;font-weight: 600;text-transform: uppercase;letter-spacing: 0.04em}
.item-rating-text {font-size: 12px;color: #1c1e21;line-height: 1.4;word-break: break-word}
.tackle-set-item-empty {font-size: 12px;color: #9ca3af}
.empty-state {text-align: center;padding: 48px 24px;background-color: #fff;border-radius: 8px}
.empty-icon {font-size: 48px;color: #dddfe2;margin-bottom: 16px}
.empty-state p {color: #65676b;margin-bottom: 16px}
.empty-hint {font-size: 14px;color: #8a8d91;margin-bottom: 12px !important}
.back-link-container {margin-top: 24px;text-align: center}
.back-link {display: inline-flex;align-items: center;gap: 6px;color: #1877f2;text-decoration: none;font-size: 14px}
.back-link:hover {text-decoration: underline}
.tackle-form-page .login-container {max-width: 500px}
.tackle-form-container {max-width: 720px}
.form-title {font-size: 1.25rem;font-weight: 600;color: #1c1e21;margin-bottom: 24px;text-align: center}
.form-select {width: 100%;padding: 12px;border: 1px solid #dddfe2;border-radius: 6px;font-size: 16px;background-color: #fff;cursor: pointer;box-sizing: border-box}
.form-input {width: 100%;padding: 12px;border: 1px solid #dddfe2;border-radius: 6px;font-size: 16px;background-color: #fff;box-sizing: border-box}
.form-textarea {resize: vertical;min-height: 80px;font-family: inherit;font-weight: normal}
.tackle-add-form {display: flex;flex-direction: column;gap: 16px}
.tackle-form-page .page-header {background: #fff;border-radius: 16px;padding: 18px 20px;border: 1px solid #e4e9f2;box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);align-items: flex-start}
.tackle-form-page .page-header h1 {font-size: 1.6rem}
.tackle-form-page .page-header-subtitle {font-size: 13px;color: #64748b}
.page-header-tackle-info {display: flex;align-items: center;gap: 8px;margin-top: 8px;padding: 8px 12px;background: #f7f8fa;border-radius: 8px;border: 1px solid #e4e6eb}
.page-header-tackle-name {font-size: 14px;font-weight: 500;color: #1c1e21}
.tackle-form-page .tackle-add-form {gap: 20px}
.tackle-form-page .tackle-form-section {border-radius: 16px;border: 1px solid #e4e9f2;box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);position: relative}
.tackle-form-page .tackle-form-section::before {content: "";position: absolute;top: 0;left: 0;right: 0;height: 3px;background: linear-gradient(90deg, #1877f2, #33b3ff);opacity: 0.9}
.tackle-form-page .tackle-form-section-header {background: linear-gradient(180deg, #f8fbff 0%, #f7f8fa 100%);border-bottom: 1px solid #e8ecf4;padding: 16px 18px}
.tackle-form-page .section-icon {background: linear-gradient(135deg, #e7f3ff, #f1f6ff);border: 1px solid #d6e7ff;box-shadow: 0 4px 10px rgba(24, 119, 242, 0.15)}
.tackle-form-page .section-title {font-size: 15px}
.tackle-form-page .section-subtitle {color: #94a3b8}
.tackle-form-page .tackle-filter-grid {gap: 14px;padding: 18px}
.tackle-form-page .tackle-filter-item {background-color: #f8fafc;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 .form-select,
.tackle-form-page .form-input,
.tackle-form-page .form-textarea {border-radius: 10px;border: 1px solid #dfe3eb;background-color: #fbfcff;transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s}
.tackle-form-page .form-select:focus,
.tackle-form-page .form-input:focus,
.tackle-form-page .form-textarea:focus {outline: none;border-color: #1877f2;background-color: #fff;box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.15)}
.tackle-form-page .form-actions .btn {border-radius: 999px;box-shadow: 0 12px 22px rgba(24, 119, 242, 0.25);letter-spacing: 0.02em}
.tackle-form-page .custom-toggle-label {background: linear-gradient(120deg, #f8fbff, #eef5ff);border: 1px solid #dbeafe}
.tackle-form-page .tackle-form-section {animation: tackleFadeUp 0.45s ease both}
@keyframes tackleFadeUp {from {opacity: 0;transform: translateY(10px)}
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-color: #fff;border-radius: 8px;border: 1px solid #e7e9ee;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);overflow: hidden}
.tackle-form-section-header {display: flex;align-items: flex-start;gap: 10px;padding: 14px 16px;background-color: #f7f8fa;border-bottom: 1px solid #e4e6eb}
.section-icon {display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;background-color: #e7f3ff;border-radius: 6px;color: #1877f2;font-size: 14px}
.section-title {font-size: 15px;font-weight: 600;color: #1c1e21}
.section-header-text {display: flex;flex-direction: column;gap: 2px}
.section-subtitle {font-size: 12px;color: #8a8d91}
.tackle-section-body {padding: 16px;display: flex;flex-direction: column;gap: 12px}
.section-title-row {display: flex;align-items: center;gap: 8px}
.selection-count {display: inline-flex;align-items: center;padding: 2px 8px;border-radius: 999px;background-color: #eef5ff;color: #1d4ed8;font-size: 11px;font-weight: 600}
.btn-ghost-danger {color: #dc2626;border-color: #fecaca;background-color: #fff5f5}
@media (min-width: 768px) {.tackle-form-page .tackle-form-section-header {align-items: center}}
.btn-ghost-danger:hover {background-color: #fee2e2;border-color: #fca5a5}
.tackle-inline-note {margin: 0;font-size: 12px;color: #64748b}
.tackle-section-actions {display: flex;justify-content: flex-end}
.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 {padding: 16px;display: flex;flex-direction: column;gap: 16px}
.tackle-personal-fields .form-field {margin-bottom: 0}
.field-label {display: flex;align-items: center;gap: 6px;font-size: 13px;font-weight: normal;color: #65676b;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: 8px}
.form-actions .btn {width: 100%;justify-content: center;padding: 12px}
.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: 8px;max-height: 200px;overflow-y: auto;padding: 8px;background-color: #f7f8fa;border-radius: 6px}
.tackle-option-row {display: flex;align-items: center;gap: 8px;padding: 8px 12px;background-color: #fff;border-radius: 6px;border: 1px solid #e5e7eb}
.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: 8px 12px;background-color: #fff;border-radius: 6px;cursor: pointer;transition: background-color 0.2s}
.tackle-checkbox-label:hover {background-color: #f0f2f5}
.tackle-checkbox-label input[type="checkbox"] {width: 18px;height: 18px;cursor: pointer}
.tackle-checkbox-label input[type="checkbox"]:checked + .tackle-checkbox-text {color: #1877f2}
.tackle-checkbox-text {display: flex;flex-direction: column;gap: 2px}
.tackle-checkbox-text .manufacturer {font-size: 12px;color: #65676b}
.tackle-checkbox-text .name {font-size: 14px;color: #1c1e21}
.empty-notice {font-size: 14px;color: #8a8d91;padding: 12px;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}
.tackle-custom-fields {padding: 16px;display: flex;flex-direction: column;gap: 16px}
.tackle-custom-fields .form-field {margin-bottom: 0}
.required-mark {color: #fa383e;margin-left: 2px}
@media (max-width: 768px) {.tackle-container {padding: 16px}
.tackle-page:not(.tackle-form-page) .page-header {flex-direction: column;align-items: flex-start;gap: 12px}
.tackle-count-badge {justify-content: center}
.tackle-page:not(.tackle-form-page) .page-header .btn {width: 100%;justify-content: center}
.tackle-hero {grid-template-columns: 1fr;padding: 18px}
.tackle-hero-actions {align-items: flex-start;text-align: left;width: 100%}
.tackle-hero-actions .btn {width: 100%;justify-content: center}
.tackle-sets-list {grid-template-columns: 1fr}
.tackle-filter-grid {grid-template-columns: 1fr}}