.tackle-page { background-color: #f0f2f5; min-height: 100vh; padding-bottom: 0; overflow-x: hidden; }
.ts-container { max-width: 840px; margin: 0 auto; padding: 20px 16px 20px; box-sizing: border-box; width: 100%; }
.ts-shelf-header { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 22px 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(15,23,42,.06); }
.ts-shelf-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.ts-shelf-title { font-size: 1.55rem; font-weight: 700; color: #0f172a; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; margin: 0; }
.ts-shelf-title-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #3b82f6, #1d4ed8); display: flex; align-items: center; justify-content: center; }
.ts-shelf-title-icon svg { width: 20px; height: 20px; stroke: #fff; }
.ts-shelf-subtitle { font-size: 13px; color: #64748b; margin-top: 4px; }
.ts-toolbar { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 20px; }
.ts-view-toggle { display: flex; gap: 2px; background: #f1f5f9; border-radius: 8px; padding: 2px; }
.ts-view-btn { width: 34px; height: 34px; border: none; border-radius: 6px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.ts-view-btn.active { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.ts-view-btn svg { width: 16px; height: 16px; stroke: #64748b; }
.ts-view-btn.active svg { stroke: #1877f2; }
.ts-shelf-section { margin-bottom: 28px; }
.ts-shelf-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 0 4px; }
.ts-shelf-section-title { display: flex; align-items: center; gap: 10px; }
.ts-shelf-section-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ts-shelf-section-icon svg { width: 16px; height: 16px; }
.ts-type-rod { background: #e0f2fe; }
.ts-type-rod svg { stroke: #0284c7; }
.ts-type-reel { background: #ede9fe; }
.ts-type-reel svg { stroke: #7c3aed; }
.ts-type-item { background: #fef3c7; }
.ts-type-item svg { stroke: #d97706; }
.ts-shelf-section-name { font-size: 1.05rem; font-weight: 700; color: #0f172a; }
.ts-shelf-section-count { font-size: 12px; color: #64748b; font-weight: 500; background: #f1f5f9; border-radius: 999px; padding: 4px 10px; }
.ts-shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ts-shelf-card { position: relative; border-radius: 16px; padding: 20px; cursor: default; transition: transform .25s, box-shadow .25s; overflow: hidden; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.6); }
.ts-shelf-card:hover { transform: translateY(-4px); }
.ts-card-rod { background: linear-gradient(145deg, #e0f2fe 0%, #bae6fd 40%, #7dd3fc 100%); box-shadow: 0 4px 16px rgba(14,165,233,.15); }
.ts-card-rod:hover { box-shadow: 0 12px 32px rgba(14,165,233,.25); }
.ts-card-reel { background: linear-gradient(145deg, #ede9fe 0%, #ddd6fe 40%, #c4b5fd 100%); box-shadow: 0 4px 16px rgba(139,92,246,.15); }
.ts-card-reel:hover { box-shadow: 0 12px 32px rgba(139,92,246,.25); }
.ts-card-item { background: linear-gradient(145deg, #fef3c7 0%, #fde68a 40%, #fcd34d 100%); box-shadow: 0 4px 16px rgba(245,158,11,.15); }
.ts-card-item:hover { box-shadow: 0 12px 32px rgba(245,158,11,.25); }
.ts-shelf-card-bg-svg { position: absolute; top: -6px; right: -6px; opacity: .06; pointer-events: none; }
.ts-shelf-card-bg-svg svg { width: 80px; height: 80px; }
.ts-card-rod .ts-shelf-card-bg-svg svg { stroke: #0284c7; }
.ts-card-reel .ts-shelf-card-bg-svg svg { stroke: #7c3aed; }
.ts-card-item .ts-shelf-card-bg-svg svg { stroke: #d97706; }
.ts-shelf-card-maker { font-size: 12px; color: #475569; margin-bottom: 3px; font-weight: 500; }
.ts-shelf-card-name { font-size: 16px; font-weight: 700; color: #0f172a; line-height: 1.4; overflow-wrap: anywhere; }
.ts-shelf-card-nickname { font-size: 12px; color: #64748b; margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.ts-shelf-card-nickname svg { width: 12px; height: 12px; stroke: #64748b; }
.ts-shelf-card-rating { margin-top: 4px; display: flex; align-items: center; gap: 4px; font-size: 12px; color: #64748b; }
.ts-shelf-card-rating svg { width: 13px; height: 13px; stroke: #f59e0b; fill: #f59e0b; flex-shrink: 0; }
.ts-rating-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ts-shelf-card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.ts-shelf-usage { font-size: 11px; font-weight: 600; color: #0f172a; background: rgba(255,255,255,.7); backdrop-filter: blur(4px); border-radius: 999px; padding: 4px 10px; display: flex; align-items: center; gap: 4px; }
.ts-shelf-usage svg { width: 12px; height: 12px; stroke: #0f172a; }
.ts-shelf-card-btns { display: flex; gap: 4px; }
.ts-shelf-card-btn { width: 28px; height: 28px; border-radius: 8px; border: none; background: rgba(255,255,255,.5); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; text-decoration: none; color: #475569; padding: 0; }
.ts-shelf-card-btn:hover { background: rgba(255,255,255,.8); }
.ts-shelf-card-btn svg { width: 13px; height: 13px; stroke: #475569; }
.ts-shelf-card-btns form { display: inline-flex; margin: 0; padding: 0; }
.ts-shelf-add-card { border: 2px dashed #cbd5e1; border-radius: 16px; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: border-color .2s, background .2s; background: rgba(255,255,255,.5); text-decoration: none; }
.ts-shelf-add-card:hover { border-color: #93c5fd; background: #f0f7ff; }
.ts-shelf-add-card svg { width: 24px; height: 24px; stroke: #94a3b8; }
.ts-shelf-add-card span { font-size: 13px; color: #94a3b8; font-weight: 500; }
.ts-shelf-list { display: flex; flex-direction: column; gap: 6px; }
.ts-list-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; transition: border-color .2s, box-shadow .2s; border-left: 4px solid transparent; }
.ts-list-item:hover { border-color: #d1d5db; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.ts-list-rod { border-left-color: #0ea5e9; }
.ts-list-reel { border-left-color: #8b5cf6; }
.ts-list-item.ts-list-item { border-left-color: #f59e0b; }
.ts-list-rod { border-left-color: #0ea5e9; }
.ts-list-reel { border-left-color: #8b5cf6; }
.ts-list-item-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ts-list-item-icon svg { width: 18px; height: 18px; }
.ts-list-item-icon.ts-type-rod { background: #e0f2fe; }
.ts-list-item-icon.ts-type-rod svg { stroke: #0284c7; }
.ts-list-item-icon.ts-type-reel { background: #ede9fe; }
.ts-list-item-icon.ts-type-reel svg { stroke: #7c3aed; }
.ts-list-item-icon.ts-type-item { background: #fef3c7; }
.ts-list-item-icon.ts-type-item svg { stroke: #d97706; }
.ts-list-item-body { flex: 1; min-width: 0; }
.ts-list-item-name { font-size: 14px; font-weight: 600; color: #1e293b; overflow-wrap: anywhere; }
.ts-list-item-maker { font-size: 12px; color: #94a3b8; }
.ts-list-item-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ts-list-item-usage { font-size: 12px; color: #64748b; white-space: nowrap; }
.ts-list-item-btns { display: flex; gap: 2px; }
.ts-list-item-btn { width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; text-decoration: none; color: #94a3b8; padding: 0; }
.ts-list-item-btn:hover { background: #f3f4f6; }
.ts-list-item-btn svg { width: 13px; height: 13px; stroke: #94a3b8; }
.ts-list-item-btns form { display: inline-flex; margin: 0; padding: 0; }
.ts-list-add-row { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px dashed #d1d5db; border-radius: 12px; cursor: pointer; color: #94a3b8; font-size: 13px; font-weight: 500; transition: border-color .2s; text-decoration: none; }
.ts-list-add-row:hover { border-color: #93c5fd; background: #f8fbff; color: #94a3b8; }
.ts-list-add-row svg { width: 14px; height: 14px; stroke: #94a3b8; }
.ts-tray-section { margin-bottom: 28px; }
.ts-tray-section-header { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.ts-tray-section-title { font-size: 1.1rem; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 8px; }
.ts-tray-section-title svg { width: 18px; height: 18px; stroke: #1877f2; }
.ts-tray-list { display: flex; flex-direction: column; gap: 14px; }
.ts-tray-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 8px rgba(15,23,42,.04); transition: border-color .2s, box-shadow .2s; }
.ts-tray-card:hover { border-color: #93c5fd; box-shadow: 0 8px 24px rgba(15,23,42,.08); }
.ts-tray-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #f1f5f9; }
.ts-tray-name { font-size: 1rem; font-weight: 700; color: #0f172a; }
.ts-tray-meta { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.ts-tray-actions { display: flex; gap: 6px; }
.ts-tray-action-btn { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; text-decoration: none; padding: 0; }
.ts-tray-action-btn:hover { background: #f1f5f9; color: #475569; }
.ts-tray-action-btn svg { width: 14px; height: 14px; stroke: currentColor; }
.ts-tray-actions form { display: inline-flex; margin: 0; padding: 0; }
.ts-tray-body { padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.ts-tray-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 500; }
.ts-tray-chip svg { width: 14px; height: 14px; }
.ts-tray-chip-rod { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.ts-tray-chip-rod svg { stroke: #0369a1; }
.ts-tray-chip-reel { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
.ts-tray-chip-reel svg { stroke: #6d28d9; }
.ts-tray-chip-item { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.ts-tray-chip-item svg { stroke: #b45309; }
.ts-tray-add-card { border: 2px dashed #cbd5e1; border-radius: 18px; padding: 32px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; text-decoration: none; display: block; }
.ts-tray-add-card:not(.is-disabled):hover { border-color: #93c5fd; background: #f8fbff; }
.ts-tray-add-card.is-disabled { opacity: .5; cursor: default; }
.ts-tray-add-card svg { width: 22px; height: 22px; stroke: #94a3b8; margin-bottom: 6px; }
.ts-tray-add-card div { font-size: 13px; color: #94a3b8; }
.is-selecting .ts-shelf-card,
.is-selecting .ts-list-item[data-uti-id] { cursor: pointer; }
.is-selecting .ts-shelf-card:hover { transform: none; }
.is-selecting .ts-shelf-card-btns,
.is-selecting .ts-list-item-btns { display: none !important; }
.is-selecting .ts-shelf-card-bottom { justify-content: flex-start; }
.is-selecting .ts-shelf-add-card,
.is-selecting .ts-list-add-row { display: none !important; }
.is-selecting .ts-tray-actions { display: none; }
.is-selecting .ts-shelf-section-count { display: none; }
.ts-selection-hint { display: none; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.is-selecting .ts-selection-hint { display: inline-flex; animation: tsHintPulse 2s ease-in-out infinite; }
.ts-selection-hint-rod { background: #e0f2fe; color: #0369a1; }
.ts-selection-hint-reel { background: #ede9fe; color: #6d28d9; }
.ts-selection-hint-item { background: #fef3c7; color: #b45309; }
@keyframes tsHintPulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.ts-shelf-card.is-selected { outline: 3px solid #1877f2; outline-offset: -2px; }
.ts-shelf-card.is-selected::before {content: ""; position: absolute; top: 10px; right: 10px;width: 24px; height: 24px; background: #1877f2; border-radius: 50%;border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); z-index: 2}
.ts-shelf-card.is-selected::after {content: ""; position: absolute; top: 15px; right: 17px;width: 6px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0;transform: rotate(45deg); z-index: 3}
.ts-list-item.is-selected {background: #eff6ff; border-color: #1877f2 !important; border-left-color: #1877f2 !important}
.ts-set-form-panel {background: #fff; border: 2px solid #1877f2; border-radius: 18px;overflow: hidden; box-shadow: 0 8px 24px rgba(24,119,242,.12)}
.ts-set-form-header {padding: 14px 20px; border-bottom: 1px solid #f1f5f9; background: #f8fafc;display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap}
.ts-set-form-title { font-size: 1rem; font-weight: 700; color: #0f172a; }
.ts-set-form-hint { font-size: 12px; color: #64748b; }
.ts-set-form-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.ts-set-form-name { font-size: 16px; }
.ts-set-form-summary {background: #f8fafc; border-radius: 10px; border: 1px solid #f1f5f9;padding: 4px 0; overflow: hidden}
.ts-set-summary-row {display: flex; align-items: center; gap: 10px;padding: 8px 14px; font-size: 13px}
.ts-set-summary-row + .ts-set-summary-row { border-top: 1px solid #f1f5f9; }
.ts-set-summary-type {font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px;min-width: 52px; text-align: center; flex-shrink: 0}
.ts-set-summary-rod { background: #e0f2fe; color: #0369a1; }
.ts-set-summary-reel { background: #ede9fe; color: #6d28d9; }
.ts-set-summary-item { background: #fef3c7; color: #b45309; }
.ts-set-summary-value {flex: 1; min-width: 0; color: #94a3b8; font-style: italic;overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.ts-set-summary-row.is-filled .ts-set-summary-value {color: #0f172a; font-weight: 500; font-style: normal}
.ts-set-summary-count { font-size: 11px; color: #94a3b8; flex-shrink: 0; }
.ts-set-form-actions {padding: 12px 20px 16px; display: flex; gap: 10px; justify-content: flex-end}
.ts-set-form-cancel {padding: 10px 20px; border-radius: 10px; border: 1px solid #e2e8f0;background: #fff; color: #64748b; font-size: 14px; font-weight: 500; cursor: pointer;transition: background .15s}
.ts-set-form-cancel:hover { background: #f8fafc; }
.ts-set-form-submit {padding: 10px 24px; border-radius: 10px; border: none;background: #1877f2; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;box-shadow: 0 2px 8px rgba(24,119,242,.25); transition: background .15s}
.ts-set-form-submit:hover:not(:disabled) { background: #166fe5; }
.ts-set-form-submit:disabled { opacity: .45; cursor: default; }
.ts-floating-bar {position: sticky; bottom: 0; z-index: 100;background: #fff; border-top: 1px solid #e2e8f0;box-shadow: 0 -4px 16px rgba(0,0,0,.08); padding: 12px 16px;margin: 0 -16px; width: calc(100% + 32px); box-sizing: border-box}
.ts-floating-bar-inner {max-width: 840px; margin: 0 auto;display: flex; align-items: center; justify-content: space-between; gap: 12px}
.ts-floating-bar-count { font-size: 14px; font-weight: 600; color: #1877f2; }
.ts-floating-bar-actions { display: flex; gap: 8px; }
.ts-floating-bar-cancel {padding: 8px 16px; border-radius: 8px; border: 1px solid #e2e8f0;background: #fff; color: #64748b; font-size: 13px; font-weight: 500; cursor: pointer}
.ts-floating-bar-save {padding: 8px 20px; border-radius: 8px; border: none;background: #1877f2; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;box-shadow: 0 2px 6px rgba(24,119,242,.25)}
.ts-floating-bar-save:hover:not(:disabled) { background: #166fe5; }
.ts-floating-bar-save:disabled { opacity: .45; cursor: default; }
@media (max-width: 600px) {.ts-container { padding: 14px 12px 14px; }
.ts-shelf-header { padding: 18px; }
.ts-shelf-title { font-size: 1.3rem; }
.ts-shelf-grid { grid-template-columns: 1fr; }
.ts-shelf-card { min-height: 130px; padding: 16px; }
.ts-tray-body { flex-direction: column; }
.ts-list-item-usage { display: none; }
.ts-set-form-header { padding: 12px 16px; }
.ts-set-form-body { padding: 12px 16px; }
.ts-set-form-actions { padding: 10px 16px 14px; }
.ts-floating-bar {margin: 0 -12px; width: calc(100% + 24px);padding: 12px;bottom: 0}}
.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 0}
.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 svg {width: 16px;height: 16px;stroke: currentColor}
.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-icon svg {width: 16px;height: 16px;stroke: #1877f2}
.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}
.tackle-filter-grid--type-fixed {grid-template-columns: 1fr}
.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-wrapper svg {width: 16px;height: 16px;stroke: #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,
.tackle-search-icon {position: absolute;left: 12px;top: 50%;transform: translateY(-50%);color: #8a8d91;font-size: 13px;display: flex;align-items: center}
.tackle-search-icon svg {width: 14px;height: 14px;stroke: #8a8d91}
.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-label svg {width: 14px;height: 14px;stroke: #1877f2;flex-shrink: 0}
.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}
.custom-toggle-text svg {width: 16px;height: 16px;stroke: #1877f2;flex-shrink: 0}
.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}
.tf-steps {display: flex;align-items: center;gap: 0;padding: 16px 20px;background: #fff;border: 1px solid #e2e8f0;border-radius: 14px;margin-bottom: 20px;box-shadow: 0 2px 6px rgba(15,23,42,.04)}
.tf-step {display: flex;align-items: center;gap: 8px;opacity: .45;transition: opacity .25s}
.tf-step.is-active { opacity: 1; }
.tf-step.is-done { opacity: .7; }
.tf-step-num {width: 28px;height: 28px;border-radius: 50%;background: #e2e8f0;color: #64748b;display: flex;align-items: center;justify-content: center;font-size: 13px;font-weight: 700;flex-shrink: 0;transition: background .25s, color .25s}
.tf-step.is-active .tf-step-num {background: #1877f2;color: #fff;box-shadow: 0 2px 8px rgba(24,119,242,.3)}
.tf-step.is-done .tf-step-num {background: #22c55e;color: #fff}
.tf-step-label {font-size: 13px;font-weight: 600;color: #334155}
.tf-step.is-active .tf-step-label { color: #1877f2; }
.tf-step.is-done .tf-step-label { color: #22c55e; }
.tf-step-connector {flex: 1;height: 2px;background: #e2e8f0;margin: 0 12px;border-radius: 1px}
.tf-step.is-done ~ .tf-step-connector,
.tf-step-connector:has(+ .tf-step.is-active) { background: #1877f2; }
.tf-search-bar {background: #fff;border: 1px solid #e2e8f0;border-radius: 14px;padding: 16px;margin-bottom: 16px;box-shadow: 0 2px 6px rgba(15,23,42,.04)}
.tf-search-bar-inner {display: flex;flex-direction: column;gap: 12px}
.tf-search-main {position: relative}
.tf-search-icon {position: absolute;left: 14px;top: 50%;transform: translateY(-50%);display: flex;align-items: center}
.tf-search-icon svg {width: 16px;height: 16px;stroke: #94a3b8}
.tf-search-input {width: 100%;padding: 12px 14px 12px 40px;border: 1px solid #e2e8f0;border-radius: 10px;font-size: 16px;background: #f8fafc;box-sizing: border-box;transition: border-color .2s, box-shadow .2s, background .2s}
.tf-search-input:focus {outline: none;border-color: #1877f2;box-shadow: 0 0 0 3px rgba(24,119,242,.12);background: #fff}
.tf-filter-chips {display: flex;gap: 8px}
.tf-filter-select {flex: 1;padding: 8px 12px;border: 1px solid #e2e8f0;border-radius: 8px;font-size: 13px;background: #f8fafc;color: #475569;cursor: pointer;box-sizing: border-box;transition: border-color .2s}
.tf-filter-select:focus {outline: none;border-color: #1877f2}
.tf-search-result {margin-top: 8px;font-size: 12px;font-weight: 600;color: #1877f2;text-align: right}
.tf-product-section {background: #fff;border: 1px solid #e2e8f0;border-radius: 14px;padding: 16px;margin-bottom: 16px;box-shadow: 0 2px 6px rgba(15,23,42,.04)}
.tf-product-field {display: flex;flex-direction: column;gap: 8px}
.tf-product-label {font-size: 13px;font-weight: 600;color: #334155}
.tf-product-select {font-size: 16px}
.tf-selected-preview {display: flex;align-items: center;gap: 10px;margin-top: 12px;padding: 10px 14px;background: #f0fdf4;border: 1px solid #bbf7d0;border-radius: 10px;animation: tfSlideIn .3s ease}
@keyframes tfSlideIn {from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }}
.tf-selected-preview-icon {flex-shrink: 0;display: flex;align-items: center}
.tf-selected-preview-icon svg {width: 20px;height: 20px;stroke: #22c55e}
.tf-selected-preview-info {display: flex;flex-direction: column;gap: 2px;min-width: 0}
.tf-selected-preview-type {font-size: 11px;font-weight: 600;color: #16a34a}
.tf-selected-preview-name {font-size: 14px;font-weight: 600;color: #0f172a;overflow-wrap: anywhere}
.tf-custom-toggle {margin-bottom: 20px}
.tf-custom-toggle-label {display: flex;align-items: center;gap: 12px;cursor: pointer;padding: 12px 16px;background: #f8fafc;border: 1px solid #e2e8f0;border-radius: 10px;transition: background .2s, border-color .2s}
.tf-custom-toggle-label:hover {background: #eff6ff;border-color: #dbeafe}
.tf-custom-toggle-label input[type="checkbox"] {width: 18px;height: 18px;accent-color: #1877f2;cursor: pointer;flex-shrink: 0}
.tf-custom-toggle-text {display: flex;align-items: center;gap: 8px;font-size: 13px;font-weight: 500;color: #475569}
.tf-custom-toggle-text svg {width: 14px;height: 14px;stroke: #1877f2;flex-shrink: 0}
.tf-step2-section {margin-bottom: 20px;animation: tfSlideIn .35s ease both}
.tf-floating-submit {position: sticky;bottom: 0;z-index: 100;background: #fff;border-top: 1px solid #e2e8f0;box-shadow: 0 -4px 16px rgba(0,0,0,.08);padding: 14px 16px;margin: 0 -16px;width: calc(100% + 32px);box-sizing: border-box}
.tf-floating-submit-inner {max-width: 780px;margin: 0 auto;display: flex;align-items: center;gap: 12px}
.tf-floating-cancel {display: inline-flex;align-items: center;gap: 6px;padding: 10px 20px;border-radius: 10px;border: 1px solid #e2e8f0;background: #fff;color: #64748b;font-size: 14px;font-weight: 500;text-decoration: none;transition: background .15s;white-space: nowrap;flex-shrink: 0}
.tf-floating-cancel svg {width: 14px;height: 14px;stroke: currentColor;flex-shrink: 0}
.tf-floating-cancel:hover {background: #f8fafc;color: #64748b;text-decoration: none}
.tf-floating-save {flex: 1;padding: 12px 24px;border-radius: 10px;border: none;background: #1877f2;color: #fff;font-size: 15px;font-weight: 600;cursor: pointer;box-shadow: 0 2px 8px rgba(24,119,242,.25);transition: background .15s;text-align: center}
.tf-floating-save:hover:not(:disabled) { background: #166fe5; }
.tf-floating-save:disabled {background: #bcc0c4;cursor: not-allowed;box-shadow: none}
@media (max-width: 600px) {.tf-steps { padding: 12px 14px; }
.tf-step-label { font-size: 12px; }
.tf-step-num { width: 24px; height: 24px; font-size: 11px; }
.tf-search-bar { padding: 12px; }
.tf-filter-chips { flex-direction: column; }
.tf-product-section { padding: 12px; }
.tf-floating-submit {margin: 0 -12px;width: calc(100% + 24px);padding: 12px;bottom: 0}
.tf-floating-cancel {padding: 10px 14px;font-size: 13px}
.tf-floating-save {padding: 12px 16px;font-size: 14px}}
@media (max-width: 768px) {.tackle-container {padding: 16px 12px 32px}
.tackle-form-container {padding: 16px 12px 0}
.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}
.tackle-search-input .form-input {padding-left: 34px}
.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}}