body.fishing_reports {background-color: #f0f2f5}
body.form-page:has(.fishing-report-new-container) .main-content {align-items: center;scrollbar-width: none;-ms-overflow-style: none}
body.form-page:has(.fishing-report-new-container) .main-content::-webkit-scrollbar {display: none}
@media (max-width: 768px) {body.form-page:has(.fishing-report-new-container) .main-content {align-items: flex-start;padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px))}}
.fishing-report-new-container {max-width: 520px;margin: 0 auto;padding: 0 24px 24px}
.fishing-report-header {text-align: center;margin-bottom: 24px}
.fishing-report-icon {display: inline-flex;align-items: center;justify-content: center;width: 64px;height: 64px;min-width: 64px;min-height: 64px;aspect-ratio: 1 / 1;background: linear-gradient(135deg, #42b72a 0%, #2d8a1d 100%);border-radius: 50%;margin-bottom: 12px;flex-shrink: 0}
.fishing-report-icon svg {color: #fff}
.fishing-report-header h1 {font-size: 1.5rem;font-weight: 700;color: #1c1e21;margin: 0 0 8px 0}
.fishing-report-description {color: #606770;font-size: 0.9rem;margin: 0;line-height: 1.5}
.fishing-report-optional-section {background: #f7f7f7;border-radius: 12px;padding: 16px}
.fishing-report-optional-section .optional-section-label {font-size: 0.85rem;font-weight: 600;color: #1c1e21;text-align: center;margin: 0 0 8px 0}
.fishing-report-comment-hint {font-size: 0.8rem;color: #606770;text-align: center;margin: 0 0 16px 0;line-height: 1.5}
.fishing-report-optional-fields {display: flex;gap: 12px;align-items: flex-start}
.fishing-report-photo-field {flex-shrink: 0}
.fishing-report-photo-preview {width: 80px;height: 80px;background: #fff;border: 2px dashed #ddd;border-radius: 8px;display: flex;align-items: center;justify-content: center;cursor: pointer;overflow: hidden;transition: border-color 0.2s}
.fishing-report-photo-preview:hover {border-color: #42b72a}
.fishing-report-photo-img {width: 100%;height: 100%;object-fit: cover;display: none}
.fishing-report-photo-placeholder {display: flex;flex-direction: column;align-items: center;gap: 4px;color: #999}
.fishing-report-photo-placeholder svg {color: #ccc}
.fishing-report-photo-placeholder span {font-size: 0.7rem}
.fishing-report-comment-field {flex: 1}
.fishing-report-comment-input {width: 100%;height: 80px;padding: 10px 12px;border: 1px solid #ddd;border-radius: 8px;font-size: 0.9rem;resize: none;font-family: inherit;transition: border-color 0.2s;box-sizing: border-box}
.fishing-report-comment-input:focus {outline: none;border-color: #42b72a}
.fishing-report-comment-input::placeholder {color: #999}
.fishing-report-caution {display: flex;align-items: flex-start;gap: 6px;font-size: 0.75rem;color: #e74c3c;margin: 16px 0 0 0;line-height: 1.4;background: #fef5f5;padding: 10px 12px;border-radius: 6px;border: 1px solid #fce4e4}
.fishing-report-caution svg {flex-shrink: 0;margin-top: 1px}
.fishing-report-map-section {margin-top: 16px;background: #fff;border-radius: 12px;padding: 16px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05)}
.fishing-report-map-section #map {margin-bottom: 12px}
.fishing-report-location-button {display: flex;align-items: center;justify-content: center;gap: 8px;width: 100%;padding: 12px 16px;font-size: 0.9rem;font-weight: 500;color: #42b72a;background: #f0fff0;border: 1px solid #42b72a;border-radius: 8px;cursor: pointer;transition: all 0.2s ease}
.fishing-report-location-button:hover {background: #e6ffe6}
.fishing-report-location-button svg {flex-shrink: 0}
.fishing-report-details-section {margin-top: 16px}
.fishing-report-details-toggle {margin-bottom: 16px}
.fishing-report-detail-fields {background: #fff;border-radius: 12px;padding: 16px;margin-top: 16px}
.fishing-report-detail-fields .form-field {margin-bottom: 16px}
.fishing-report-detail-fields .form-field:last-child {margin-bottom: 0}
.fishing-report-detail-fields input[type="text"],
.fishing-report-detail-fields input[type="number"] {width: 100%;padding: 12px;border: 1px solid #ddd;border-radius: 8px;font-size: 16px;box-sizing: border-box;transition: border-color 0.2s}
.fishing-report-detail-fields input[type="text"]:focus,
.fishing-report-detail-fields input[type="number"]:focus {outline: none;border-color: #42b72a}
.fishing-report-main-action {position: relative;width: 100%;padding: 4px 0 0}
.fishing-report-submit-button {display: flex;align-items: center;justify-content: center;gap: 8px;width: 100%;padding: 14px 20px;font-size: 1rem;font-weight: 700;color: #fff;background: linear-gradient(135deg, #42b72a 0%, #2d8a1d 100%);border: none;border-radius: 12px;cursor: pointer;transition: all 0.25s ease;box-shadow: 0 4px 14px rgba(66, 183, 42, 0.3);letter-spacing: 0.02em}
.fishing-report-submit-button:hover {background: linear-gradient(135deg, #2d8a1d 0%, #1e6b14 100%);box-shadow: 0 6px 20px rgba(66, 183, 42, 0.4);transform: translateY(-2px)}
.fishing-report-submit-button:active {transform: translateY(0);box-shadow: 0 2px 4px rgba(66, 183, 42, 0.3)}
.fishing-report-submit-button:disabled {background: #ccc;cursor: not-allowed;box-shadow: none;transform: none}
.fishing-report-submit-button svg {flex-shrink: 0}
.fishing-report-footer-link {text-align: center;margin-top: 24px;padding-top: 16px;border-top: 1px solid #e9ecef}
.fishing-report-home-link {display: inline-flex;align-items: center;gap: 6px;color: #666;text-decoration: none;font-size: 0.9rem;padding: 8px 16px;border-radius: 8px;transition: all 0.2s ease}
.fishing-report-home-link:hover {color: #42b72a;background: #f0f2f5}
.fishing-report-home-link svg {flex-shrink: 0}
.quota-hint {display: flex;align-items: center;justify-content: center;gap: 12px;padding: 8px 12px;margin-bottom: 16px;background: #f0fff0;border-radius: 8px}
.quota-hint-text {font-size: 13px;color: #666}
.quota-hint-text strong {color: #42b72a;font-size: 14px}
.quota-hint-empty {background: #fff5f5;border-radius: 6px;padding: 10px 16px}
.quota-hint-empty .quota-hint-text {color: #c62828}
.quota-hint-link {font-size: 12px;color: #42b72a;text-decoration: none}
.quota-hint-link:hover {text-decoration: underline}
.quota-hint-link-primary {font-size: 12px;color: #42b72a;font-weight: 600;text-decoration: none}
.quota-hint-link-primary:hover {text-decoration: underline}
.quota-badge {position: absolute;top: -10px;right: 8px;display: flex;align-items: center;gap: 4px;padding: 4px 10px;background: linear-gradient(135deg, #42b72a 0%, #2d8a1d 100%);border-radius: 20px;box-shadow: 0 2px 6px rgba(66, 183, 42, 0.3);z-index: 1}
.quota-badge-label {font-size: 11px;color: rgba(255, 255, 255, 0.9);font-weight: 500}
.quota-badge-count {font-size: 14px;font-weight: 700;color: #fff}
.quota-badge.quota-badge-empty {background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3)}
.form-label {display: block;font-size: 14px;font-weight: 600;color: #1c1e21;margin-bottom: 6px}
.form-hint {font-size: 12px;color: #65676b;margin-top: 4px}
.edit-image-preview {display: flex;justify-content: center;margin-bottom: 16px}
.edit-thumbnail {width: 120px;height: 90px;object-fit: cover;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)}
.form-section {margin-bottom: 20px;padding-bottom: 16px;border-bottom: 1px solid #e4e6eb}
.form-section:last-of-type {border-bottom: none;margin-bottom: 16px}
.form-section-title {font-size: 13px;font-weight: 600;color: #65676b;text-transform: uppercase;letter-spacing: 0.5px;margin-bottom: 12px}
.ai-fish-hint {display: flex;align-items: center;gap: 8px;padding: 8px 12px;background-color: #e7f3ff;border-radius: 6px;margin-bottom: 12px;font-size: 13px}
.ai-fish-hint .ai-label {color: #65676b}
.ai-fish-hint .ai-value {color: #1877f2;font-weight: 500}
.optional-fields-toggle {width: 100%;padding: 12px 16px;background-color: #fff;border: 1px dashed #dddfe2;border-radius: 8px;color: #606770;font-size: 14px;cursor: pointer;transition: all 0.2s;display: flex;align-items: center;justify-content: center;gap: 8px}
.optional-fields-toggle:hover {background-color: #f5f6f7;border-color: #bec3c9;color: #1c1e21}
.optional-fields-toggle-icon {font-size: 18px;font-weight: bold;transition: transform 0.2s}
.optional-fields-toggle.is-open .optional-fields-toggle-icon {transform: rotate(45deg)}
.optional-badge {font-size: 11px;padding: 2px 8px;background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);border: 1px solid #bbf7d0;border-radius: 6px;color: #16a34a;font-weight: 600}
.hidden-file-input {display: none}
.location-error-message-style {color: #fa383e;background-color: #ffebe6;padding: 10px;border-radius: 6px;margin-bottom: 16px;text-align: left}
.loading-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.95);display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 9999}
.loading-overlay.hidden {display: none}
.loading-content {text-align: center;padding: 40px}
.loading-ocean-fantasy {position: relative;width: 300px;height: 200px;margin: 0 auto 24px;background: linear-gradient(
135deg,
rgba(30, 41, 59, 0.95) 0%,
rgba(51, 65, 85, 0.9) 50%,
rgba(30, 41, 59, 0.95) 100%
);border-radius: 20px;overflow: hidden;box-shadow:
0 0 40px rgba(96, 165, 250, 0.2),
inset 0 0 60px rgba(96, 165, 250, 0.1)}
.fantasy-ripple {position: absolute;border-radius: 50%;border: 1px solid;animation: fantasyRipple 4s ease-out infinite}
.fantasy-ripple.ripple-1 {width: 100px;height: 100px;top: 50%;left: 50%;transform: translate(-50%, -50%);border-color: rgba(167, 139, 250, 0.3)}
.fantasy-ripple.ripple-2 {width: 150px;height: 150px;top: 50%;left: 50%;transform: translate(-50%, -50%);border-color: rgba(244, 114, 182, 0.2);animation-delay: 1.3s}
.fantasy-ripple.ripple-3 {width: 200px;height: 200px;top: 50%;left: 50%;transform: translate(-50%, -50%);border-color: rgba(96, 165, 250, 0.15);animation-delay: 2.6s}
@keyframes fantasyRipple {0% {transform: translate(-50%, -50%) scale(0.3);opacity: 1}
100% {transform: translate(-50%, -50%) scale(1.5);opacity: 0}}
.particle {position: absolute;border-radius: 50%;animation: particleFloat 6s ease-in-out infinite}
.particle-1 {width: 4px;height: 4px;background: rgba(96, 165, 250, 0.6);top: 20%;left: 15%;animation-delay: 0s}
.particle-2 {width: 3px;height: 3px;background: rgba(167, 139, 250, 0.6);top: 70%;left: 25%;animation-delay: 1s}
.particle-3 {width: 5px;height: 5px;background: rgba(244, 114, 182, 0.5);top: 40%;left: 80%;animation-delay: 2s}
.particle-4 {width: 3px;height: 3px;background: rgba(52, 211, 153, 0.6);top: 80%;left: 70%;animation-delay: 0.5s}
.particle-5 {width: 4px;height: 4px;background: rgba(251, 191, 36, 0.5);top: 30%;left: 60%;animation-delay: 1.5s}
.particle-6 {width: 3px;height: 3px;background: rgba(96, 165, 250, 0.5);top: 60%;left: 10%;animation-delay: 2.5s}
@keyframes particleFloat {0%, 100% {transform: translateY(0) translateX(0);opacity: 0.3}
25% {transform: translateY(-20px) translateX(10px);opacity: 0.8}
50% {transform: translateY(-10px) translateX(-5px);opacity: 0.5}
75% {transform: translateY(-25px) translateX(5px);opacity: 0.9}}
.line-fish.fish-main {position: absolute;width: 100px;height: 60px;top: 50%;left: 50%;transform: translate(-50%, -50%);animation: lineFishSwim 5s ease-in-out infinite;filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.5))}
@keyframes lineFishSwim {0% {transform: translate(-50%, -50%) translateX(-70px) translateY(10px) rotate(-3deg)}
25% {transform: translate(-50%, -50%) translateX(-20px) translateY(-15px) rotate(3deg)}
50% {transform: translate(-50%, -50%) translateX(70px) translateY(5px) rotate(-3deg)}
75% {transform: translate(-50%, -50%) translateX(20px) translateY(-10px) rotate(3deg)}
100% {transform: translate(-50%, -50%) translateX(-70px) translateY(10px) rotate(-3deg)}}
.line-fish.fish-small-1,
.line-fish.fish-small-2,
.line-fish.fish-small-3 {position: absolute;width: 40px;height: 24px}
.line-fish.fish-small-1 {top: 25%;filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.5));animation: lineSmallFish1 4s ease-in-out infinite}
.line-fish.fish-small-2 {top: 70%;filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));animation: lineSmallFish2 4.5s ease-in-out infinite;animation-delay: -1.5s}
.line-fish.fish-small-3 {top: 45%;filter: drop-shadow(0 0 6px rgba(244, 114, 182, 0.5));animation: lineSmallFish3 3.8s ease-in-out infinite;animation-delay: -2.5s}
@keyframes lineSmallFish1 {0% {left: -50px;transform: scaleX(1) translateY(0)}
25% {transform: scaleX(1) translateY(-10px)}
48% {left: calc(100% + 10px);transform: scaleX(1) translateY(5px)}
52% {left: calc(100% + 10px);transform: scaleX(-1) translateY(5px)}
75% {transform: scaleX(-1) translateY(-8px)}
98% {left: -50px;transform: scaleX(-1) translateY(0)}
100% {left: -50px;transform: scaleX(1) translateY(0)}}
@keyframes lineSmallFish2 {0% {right: -50px;left: auto;transform: scaleX(-1) translateY(0)}
25% {transform: scaleX(-1) translateY(8px)}
48% {right: calc(100% + 10px);transform: scaleX(-1) translateY(-5px)}
52% {right: calc(100% + 10px);transform: scaleX(1) translateY(-5px)}
75% {transform: scaleX(1) translateY(10px)}
98% {right: -50px;transform: scaleX(1) translateY(0)}
100% {right: -50px;transform: scaleX(-1) translateY(0)}}
@keyframes lineSmallFish3 {0% {left: -50px;transform: scaleX(1) translateY(0) rotate(0deg)}
20% {transform: scaleX(1) translateY(-20px) rotate(5deg)}
40% {transform: scaleX(1) translateY(15px) rotate(-5deg)}
48% {left: calc(100% + 10px);transform: scaleX(1) translateY(0) rotate(0deg)}
52% {left: calc(100% + 10px);transform: scaleX(-1) translateY(0) rotate(0deg)}
70% {transform: scaleX(-1) translateY(-15px) rotate(-5deg)}
85% {transform: scaleX(-1) translateY(20px) rotate(5deg)}
98% {left: -50px;transform: scaleX(-1) translateY(0) rotate(0deg)}
100% {left: -50px;transform: scaleX(1) translateY(0) rotate(0deg)}}
.line-bubble {position: absolute;width: 20px;height: 20px;animation: lineBubbleRise 4s ease-in infinite}
.line-bubble.bubble-1 {left: 20%;bottom: -25px;animation-delay: 0s}
.line-bubble.bubble-2 {left: 50%;bottom: -25px;width: 16px;height: 16px;animation-delay: 1.3s}
.line-bubble.bubble-3 {left: 75%;bottom: -25px;width: 14px;height: 14px;animation-delay: 2.6s}
@keyframes lineBubbleRise {0% {transform: translateY(0) scale(0.8);opacity: 0}
10% {opacity: 0.8}
50% {transform: translateY(-100px) scale(1);opacity: 0.6}
100% {transform: translateY(-220px) scale(1.2);opacity: 0}}
.loading-text {color: #1c1e21;font-size: 1.2em;font-weight: 600;margin-bottom: 8px}
.loading-subtext {color: #606770;font-size: 0.9em}
.loading-dots {display: flex;justify-content: center;gap: 8px;margin-top: 16px}
.loading-dots span {width: 8px;height: 8px;background: #42b72a;border-radius: 50%;animation: dotPulse 1.4s ease-in-out infinite}
.loading-dots span:nth-child(2) {animation-delay: 0.2s}
.loading-dots span:nth-child(3) {animation-delay: 0.4s}
@keyframes dotPulse {0%, 80%, 100% {transform: scale(0.6);opacity: 0.5}
40% {transform: scale(1);opacity: 1}}
.caught-at-field {margin-bottom: 16px}
.caught-at-label {display: block;font-size: 14px;font-weight: 600;color: #1c1e21;margin-bottom: 8px}
.caught-at-inputs {display: flex;gap: 12px}
.caught-at-input-wrapper {flex: 1;position: relative;display: flex;align-items: center;background-color: #fafbfc;border: 1.5px solid #e2e8f0;border-radius: 10px;transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;cursor: pointer}
.caught-at-input-wrapper:focus-within {border-color: #42b72a;background-color: #fff;box-shadow: 0 0 0 3px rgba(66, 183, 42, 0.12)}
.caught-at-date-input,
.caught-at-time-input {flex: 1;border: none;background: transparent;padding: 12px;font-size: 16px;color: #1c1e21;outline: none;min-width: 0;cursor: pointer;box-sizing: border-box}
.caught-at-date-input::-webkit-calendar-picker-indicator,
.caught-at-time-input::-webkit-calendar-picker-indicator {cursor: pointer;opacity: 0.6;transition: opacity 0.2s}
.caught-at-date-input::-webkit-calendar-picker-indicator:hover,
.caught-at-time-input::-webkit-calendar-picker-indicator:hover {opacity: 1}
.caught-at-error {display: none;color: #dc3545;font-size: 13px;margin-top: 8px;padding: 8px 12px;background-color: #fff5f5;border: 1px solid #ffcccc;border-radius: 4px}
.photo-warning {display: flex;align-items: flex-start;gap: 8px;color: #dc2626;font-size: 12px;margin-top: 8px;padding: 8px 10px;background-color: #fef2f2;border: 1px solid #fecaca;border-radius: 10px;flex-shrink: 0;line-height: 1.5}
.photo-warning svg {flex-shrink: 0;margin-top: 1px}
.exif-hint {display: none;color: #16a34a;font-size: 12px;margin-top: 8px;padding: 8px 10px;background-color: #f0fdf4;border: 1px solid #bbf7d0;border-radius: 10px;flex-shrink: 0;line-height: 1.5}
#edit-map {height: 180px;width: 100%;border-radius: 6px}
@media (max-width: 480px) {.caught-at-inputs {flex-direction: row;gap: 8px}
.caught-at-date-input,
.caught-at-time-input {font-size: 14px}}
.step-bar-container {margin-bottom: 20px;padding: 0 4px}
.step-bar-track {position: relative;height: 10px;background: linear-gradient(180deg, #e8f5e9 0%, #c8e6c9 100%);border-radius: 5px;margin-bottom: 10px;overflow: visible;box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1)}
.step-bar-progress {position: absolute;top: 0;left: 0;height: 100%;width: 0%;background: linear-gradient(90deg, #42b72a 0%, #34d058 50%, #2d8a1d 100%);border-radius: 5px;transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: 0 1px 4px rgba(66, 183, 42, 0.35)}
.step-bar-fish {position: absolute;top: 50%;left: 0%;transform: translate(-50%, -50%);width: 38px;height: 24px;color: #2d8a1d;transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);filter: drop-shadow(0 2px 4px rgba(45, 138, 29, 0.35));z-index: 2}
.step-bar-fish svg {width: 100%;height: 100%;animation: fishSwim 1s ease-in-out infinite}
.step-bar-fish .fish-tail {animation: tailWag 0.3s ease-in-out infinite;transform-origin: 6px 12px}
@keyframes fishSwim {0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-2px) rotate(-2deg); }
75% { transform: translateY(2px) rotate(2deg); }}
@keyframes tailWag {0%, 100% { transform: scaleX(1); }
50% { transform: scaleX(0.8); }}
.step-bar-bubbles {position: absolute;top: 50%;left: 0%;transform: translate(-70%, -50%);transition: left 0.4s ease;pointer-events: none}
.step-bar-bubbles .bubble {position: absolute;width: 4px;height: 4px;background: rgba(255, 255, 255, 0.8);border-radius: 50%;animation: bubbleRise 1.5s ease-in-out infinite}
.step-bar-bubbles .bubble:nth-child(1) {left: 0;animation-delay: 0s}
.step-bar-bubbles .bubble:nth-child(2) {left: -6px;animation-delay: 0.3s}
.step-bar-bubbles .bubble:nth-child(3) {left: -3px;animation-delay: 0.6s}
@keyframes bubbleRise {0% { transform: translateY(0) scale(1); opacity: 0.8; }
50% { transform: translateY(-8px) scale(0.8); opacity: 0.4; }
100% { transform: translateY(-16px) scale(0.5); opacity: 0; }}
.step-bar-labels {display: flex;justify-content: space-between}
.step-bar-label {display: flex;flex-direction: column;align-items: center;gap: 4px;background: none;border: none;padding: 4px 2px;cursor: pointer;transition: all 0.2s ease;flex: 1}
.step-bar-label-dot {width: 14px;height: 14px;border-radius: 50%;background: #e4e6eb;border: 2.5px solid #fff;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}
.step-bar-label.active .step-bar-label-dot,
.step-bar-label.completed .step-bar-label-dot {background: #42b72a;box-shadow: 0 0 0 4px rgba(66, 183, 42, 0.2), 0 1px 4px rgba(0, 0, 0, 0.15);transform: scale(1.1)}
.step-bar-label-text {font-size: 11px;color: #65676b;font-weight: 600;white-space: nowrap;letter-spacing: 0.02em}
.step-bar-label.active .step-bar-label-text {color: #42b72a;font-weight: 600}
.step-bar-label.disabled {opacity: 0.4;cursor: not-allowed}
.step-bar-label.disabled .step-bar-label-dot {background: #e4e6eb;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15)}
.steps-container {display: flex;overflow-x: auto;scroll-snap-type: x mandatory;scroll-behavior: smooth;-webkit-overflow-scrolling: touch;scrollbar-width: none;-ms-overflow-style: none;width: 100%}
.steps-container::-webkit-scrollbar {display: none}
.steps-container.scroll-locked {overflow-x: hidden;scroll-snap-type: none}
.step-panel {flex: 0 0 100%;width: 100%;min-width: 100%;scroll-snap-align: start;scroll-snap-stop: always;box-sizing: border-box;display: flex;flex-direction: column;max-height: calc(100dvh - 340px)}
.step-content {display: flex;flex-direction: column;background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);border-radius: 16px;padding: 20px 24px;box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 16px rgba(0, 0, 0, 0.08);border: 1px solid rgba(226, 232, 240, 0.6);border-top: 3px solid #42b72a;flex: 1;min-height: 0;overflow-y: auto;scrollbar-width: none;-ms-overflow-style: none}
.step-content::-webkit-scrollbar {display: none}
.step-title {display: flex;align-items: center;gap: 8px;font-size: 1.05rem;font-weight: 700;color: #0f172a;margin: 0 0 10px 0}
.step-title svg {color: #42b72a;flex-shrink: 0}
.step-description {font-size: 0.85rem;color: #65676b;margin: 0 0 16px 0;line-height: 1.5}
.step-navigation {display: flex;justify-content: space-between;align-items: center;padding: 20px 4px 8px;margin: 0;border: none}
.step-prev-btn,
.step-next-btn {display: flex;align-items: center;justify-content: center;width: 48px;height: 48px;padding: 0;border: none;border-radius: 50%;cursor: pointer;transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;box-sizing: border-box;font-size: 0;color: transparent}
@keyframes rippleGreen {0% {outline-color: rgba(66, 183, 42, 0.5);outline-offset: 0px}
100% {outline-color: rgba(66, 183, 42, 0);outline-offset: 14px}}
.step-prev-btn svg,
.step-next-btn svg {flex-shrink: 0;width: 26px;height: 26px}
.step-prev-btn {background: #f1f5f9;border: 1.5px solid #cbd5e1;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)}
.step-prev-btn svg {color: #475569}
.step-prev-btn:hover {background: #e2e8f0;border-color: #94a3b8;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)}
.step-prev-btn:hover svg {color: #1e293b}
.step-prev-btn:active {background: #cbd5e1;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);transform: scale(0.93)}
.step-prev-btn:active svg {color: #0f172a}
.step-next-btn {background: linear-gradient(135deg, #42b72a 0%, #2d8a1d 100%);border: 1.5px solid #2d8a1d;box-shadow: 0 2px 8px rgba(66, 183, 42, 0.25);outline: 2px solid transparent;outline-offset: 0;animation: rippleGreen 2.4s ease-out infinite}
.step-next-btn svg {color: #fff}
.step-next-btn:focus-visible {outline: none;box-shadow: 0 0 0 3px rgba(66, 183, 42, 0.5);animation: none}
.step-next-btn:hover:not(:disabled) {background: linear-gradient(135deg, #4ecc34 0%, #36a322 100%);box-shadow: 0 4px 14px rgba(66, 183, 42, 0.4);animation: none;outline-color: transparent}
.step-next-btn:hover:not(:disabled) svg {color: #fff}
.step-next-btn:active:not(:disabled) {background: linear-gradient(135deg, #2d8a1d 0%, #1e6b14 100%);box-shadow: 0 1px 4px rgba(66, 183, 42, 0.2);transform: scale(0.93)}
.step-next-btn:disabled {background: #e2e8f0;border-color: #cbd5e1;box-shadow: none;animation: none;outline-color: transparent;cursor: not-allowed}
.step-next-btn:disabled svg {color: #94a3b8}
@media (prefers-reduced-motion: reduce) {.step-next-btn {animation: none}}
.step-photo-section {margin-bottom: 10px}
.step-photo-preview {width: 100%;aspect-ratio: 16 / 9;background: linear-gradient(145deg, #f0fdf4 0%, #ecfdf5 40%, #f0f9ff 100%);border: 2px dashed rgba(66, 183, 42, 0.35);border-radius: 14px;display: flex;align-items: center;justify-content: center;cursor: pointer;overflow: hidden;transition: all 0.3s ease}
.step-photo-preview:hover {border-color: #42b72a;background: linear-gradient(145deg, #dcfce7 0%, #d1fae5 40%, #e0f2fe 100%);box-shadow: 0 4px 16px rgba(66, 183, 42, 0.15);transform: translateY(-1px)}
.step-photo-img {width: 100%;height: 100%;object-fit: cover;display: none}
.step-photo-placeholder {display: flex;flex-direction: column;align-items: center;gap: 10px;color: #65676b}
.step-photo-placeholder svg {color: #42b72a;opacity: 0.5;transition: opacity 0.2s, transform 0.2s}
.step-photo-preview:hover .step-photo-placeholder svg {opacity: 0.8;transform: scale(1.05)}
.step-photo-placeholder span {font-size: 0.9rem;color: #65676b;font-weight: 500}
.step-comment-section {margin-top: 8px}
.step-field-label {display: block;font-size: 13px;font-weight: 600;color: #1c1e21;margin-bottom: 8px}
.step-comment-input {width: 100%;height: 64px;padding: 10px 14px;border: 1.5px solid #e2e8f0;border-radius: 10px;font-size: 16px;resize: none;font-family: inherit;background: #fafafa;transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;box-sizing: border-box}
.step-comment-input:focus {outline: none;border-color: #42b72a;background: #fff;box-shadow: 0 0 0 3px rgba(66, 183, 42, 0.12)}
.step-comment-input::placeholder {color: #94a3b8}
.step-location-content {display: flex;flex-direction: column;flex: 1;min-height: 0}
.location-auto-set-overlay {display: none;background: linear-gradient(135deg, #f0fff0 0%, #e8f5e9 100%);border: 2px solid #42b72a;border-radius: 8px;padding: 12px 16px;cursor: pointer;transition: all 0.2s ease}
.location-auto-set-overlay:hover {background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);box-shadow: 0 4px 12px rgba(66, 183, 42, 0.2)}
.location-auto-set-overlay.visible {display: block}
.location-auto-set-message {display: flex;align-items: center;justify-content: center;gap: 10px}
.location-auto-set-message svg {color: #42b72a;flex-shrink: 0}
.auto-set-title {font-size: 14px;font-weight: 600;color: #2d8a1d}
.auto-set-hint {font-size: 12px;color: #65676b;margin-left: 4px}
.step-map-section {flex: 1;min-height: 0;margin-bottom: 12px}
.step-map-section.disabled {pointer-events: none;opacity: 0.6}
.step-map,
.step-map-section #map {width: 100%;height: 100%;min-height: 180px;border-radius: 12px;background: #e9ecef;box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08)}
.step-location-btn {display: flex;align-items: center;justify-content: center;gap: 8px;width: 100%;padding: 14px 16px;margin-top: auto;font-size: 0.9rem;font-weight: 600;color: #fff;background: linear-gradient(135deg, #42b72a 0%, #2d8a1d 100%);border: none;border-radius: 10px;cursor: pointer;transition: all 0.2s ease;flex-shrink: 0;box-shadow: 0 2px 8px rgba(66, 183, 42, 0.25)}
.step-location-btn:hover {background: linear-gradient(135deg, #2d8a1d 0%, #1e6b14 100%);box-shadow: 0 4px 14px rgba(66, 183, 42, 0.35);transform: translateY(-1px)}
.step-location-btn svg {flex-shrink: 0}
.privacy-force-notice {display: none;align-items: center;gap: 12px;margin-top: 8px;padding: 12px 14px;background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);border: 1px solid rgba(251, 146, 60, 0.3);border-radius: 14px;color: #9a3412;box-shadow: 0 12px 28px rgba(251, 146, 60, 0.18)}
.privacy-force-notice.is-visible {display: flex}
.privacy-force-icon {width: 34px;height: 34px;border-radius: 10px;background: #fff;border: 1px solid rgba(251, 146, 60, 0.35);color: #c2410c;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.privacy-force-content {display: flex;flex-direction: column;gap: 2px}
.privacy-force-title {font-size: 12px;font-weight: 700;letter-spacing: 0.02em}
.privacy-force-text {font-size: 12px;color: #92400e;line-height: 1.4}
.step-privacy-toggle {margin-top: 12px;padding: 10px 14px;background: linear-gradient(180deg, #f8f9fa 0%, #f1f3f5 100%);border-radius: 12px;border: 1px solid #e2e8f0;flex-shrink: 0}
.step-privacy-toggle.is-hidden,
.edit-privacy-settings.is-hidden {display: none}
.step-privacy-toggle.is-forced,
.edit-privacy-settings.is-forced {opacity: 0.75}
.step-privacy-toggle.is-forced .privacy-toggle-label,
.edit-privacy-settings.is-forced .toggle-switch {cursor: not-allowed;pointer-events: none}
.privacy-toggle-label {display: flex;align-items: center;gap: 12px;cursor: pointer;user-select: none}
.privacy-toggle-label input[type="checkbox"] {display: none}
.privacy-toggle-switch {position: relative;width: 44px;height: 24px;background: #ccc;border-radius: 12px;transition: background 0.3s;flex-shrink: 0}
.privacy-toggle-switch::after {content: "";position: absolute;top: 2px;left: 2px;width: 20px;height: 20px;background: white;border-radius: 50%;transition: transform 0.3s;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)}
.privacy-toggle-label input[type="checkbox"]:checked + .privacy-toggle-switch {background: #4CAF50}
.privacy-toggle-label input[type="checkbox"]:checked + .privacy-toggle-switch::after {transform: translateX(20px)}
.privacy-toggle-text {display: flex;align-items: center;gap: 6px;font-size: 14px;font-weight: 500;color: #333}
.privacy-toggle-text svg {color: #666}
.privacy-toggle-hint {margin: 6px 0 0 56px;font-size: 12px;color: #666}
.edit-privacy-settings {display: flex;align-items: center;justify-content: space-between;padding: 12px 16px;background: #f8f9fa;border-radius: 8px;border: 1px solid #e0e0e0}
.edit-privacy-info {display: flex;flex-direction: column;gap: 4px}
.edit-privacy-label {display: flex;align-items: center;gap: 8px;font-size: 14px;font-weight: 500;color: #333}
.edit-privacy-label svg {color: #666;flex-shrink: 0}
.edit-privacy-hint {font-size: 12px;color: #666;padding-left: 24px}
.edit-privacy-settings .toggle-switch {position: relative;display: inline-block;width: 50px;height: 28px;flex-shrink: 0}
.edit-privacy-settings .toggle-switch input {opacity: 0;width: 0;height: 0}
.edit-privacy-settings .toggle-slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;transition: 0.3s;border-radius: 28px}
.edit-privacy-settings .toggle-slider:before {position: absolute;content: "";height: 22px;width: 22px;left: 3px;bottom: 3px;background-color: white;transition: 0.3s;border-radius: 50%;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)}
.edit-privacy-settings .toggle-switch input:checked + .toggle-slider {background-color: #4CAF50}
.edit-privacy-settings .toggle-switch input:checked + .toggle-slider:before {transform: translateX(22px)}
.step-detail-fields {display: flex;flex-direction: column;justify-content: center;gap: 20px;flex: 1}
.step-field {display: flex;flex-direction: column}
.step-field-label {display: flex;align-items: center;gap: 6px;font-size: 13px;font-weight: 600;color: #1c1e21;margin-bottom: 6px}
.step-fields-row {display: flex;gap: 12px}
.step-fields-row .step-field {flex: 1}
.step-input {width: 100%;padding: 12px 14px;border: 1.5px solid #e2e8f0;border-radius: 10px;font-size: 15px;background: #fafbfc;transition: all 0.2s ease;box-sizing: border-box}
.step-input:focus {outline: none;border-color: #42b72a;background: #fff;box-shadow: 0 0 0 3px rgba(66, 183, 42, 0.12), 0 2px 8px rgba(66, 183, 42, 0.08)}
.step-input::placeholder {color: #94a3b8}
.step-select {appearance: none;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2342b72a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 14px center;padding-right: 40px;cursor: pointer}
.step-select:invalid,
.step-select option[value=""] {color: #999}
.step-select option {color: #1c1e21}
.location-type-forced {display: none;align-items: center;gap: 10px;padding: 10px 12px;border-radius: 12px;border: 1px solid rgba(59, 130, 246, 0.2);background: linear-gradient(135deg, #eef2ff 0%, #dbeafe 100%);color: #1f2937;font-size: 13px;font-weight: 600;box-shadow: 0 10px 24px rgba(59, 130, 246, 0.15)}
.location-type-forced.is-visible {display: flex}
.location-type-forced-icon {width: 18px;height: 18px;color: #1d4ed8;display: flex;align-items: center;justify-content: center}
.location-type-forced-icon svg {width: 100%;height: 100%}
.location-type-forced-ship {margin-left: auto;padding: 2px 8px;border-radius: 999px;background: rgba(255, 255, 255, 0.8);color: #1d4ed8;font-size: 11px;font-weight: 700}
.location-type-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));gap: 8px}
.location-type-grid.is-hidden {display: none}
.location-type-chip {position: relative;display: flex;flex-direction: column;align-items: center;gap: 6px;padding: 12px 6px;cursor: pointer;transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);border-radius: 14px;border: 1.5px solid rgba(148, 163, 184, 0.3);box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06)}
.location-type-chip:hover {transform: translateY(-2px);border-color: rgba(66, 183, 42, 0.4);box-shadow: 0 8px 20px rgba(66, 183, 42, 0.12)}
.location-type-chip:has(input:checked) {border-color: #42b72a;background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);box-shadow: 0 4px 16px rgba(66, 183, 42, 0.18)}
.location-type-chip input[type="radio"] {position: absolute;opacity: 0;width: 0;height: 0}
.location-type-icon {width: 28px;height: 28px;border-radius: 10px;background: #f1f5f9;color: #334155;display: flex;align-items: center;justify-content: center}
.location-type-icon svg {width: 100%;height: 100%}
.location-type-chip:has(input:checked) .location-type-icon {color: #2d8a1d;background: #ffffff}
.location-type-label {font-size: 0.7em;color: #475569;font-weight: 700;text-align: center;line-height: 1.1}
.location-type-chip:has(input:checked) .location-type-label {color: #2d8a1d}
.tackle-set-select {display: flex;flex-direction: column;gap: 10px;flex: 1;overflow-y: auto}
.tackle-set-option {display: flex;align-items: flex-start;gap: 12px;padding: 16px;background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);border: 2px solid #e4e6eb;border-radius: 12px;cursor: pointer;transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)}
.tackle-set-option:hover {background: linear-gradient(180deg, #f8faf8 0%, #f0f2f5 100%);border-color: #c8e6c8;transform: translateY(-1px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06)}
.tackle-set-option:has(input[type="radio"]:checked) {background: linear-gradient(180deg, #f0fdf4 0%, #e8f5e9 100%);border-color: #42b72a;box-shadow: 0 0 0 3px rgba(66, 183, 42, 0.1), 0 4px 12px rgba(66, 183, 42, 0.1)}
.tackle-set-option input[type="radio"] {margin-top: 2px;width: 18px;height: 18px;accent-color: #42b72a;flex-shrink: 0}
.tackle-set-info {flex: 1;min-width: 0}
.tackle-set-name {display: block;font-size: 15px;font-weight: 700;color: #1c1e21;margin-bottom: 6px}
.tackle-items-grid-edit {display: flex;flex-wrap: wrap;gap: 6px;margin-top: 8px}
.tackle-item-card-edit {display: inline-flex;align-items: center;gap: 5px;padding: 6px 10px;background: #fff;border: 1px solid #e2e8f0;border-radius: 8px;font-size: 12px;color: #65676b;transition: border-color 0.2s}
.tackle-item-icon-edit {width: 16px;height: 16px;display: flex;align-items: center;justify-content: center;color: #42b72a}
.tackle-card-icon-edit {width: 14px;height: 14px}
.tackle-item-name-edit {word-break: break-word;color: #1c1e21}
.no-tackle-message {display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 1;text-align: center;padding: 24px 16px;color: #65676b}
.no-tackle-message p {margin: 0 0 16px 0;font-size: 0.9rem}
.no-tackle-message .tackle-register-note {margin: 20px 0 0;display: inline-flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 6px 8px;padding: 10px 14px;max-width: min(360px, 100%);border-radius: 14px;background: #eef6ff;border: 1px solid #cfe3ff;box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);font-size: 0.78rem;line-height: 1.5;color: #475569;text-align: center}
.tackle-register-note i {color: #3b82f6}
.tackle-register-note span {display: inline-block}
.create-tackle-link {display: inline-flex;align-items: center;gap: 6px;padding: 10px 20px;background: linear-gradient(135deg, #42b72a 0%, #2d8a1d 100%);color: #fff;text-decoration: none;border-radius: 8px;font-size: 0.9rem;font-weight: 500;transition: all 0.2s ease}
.create-tackle-link:hover {background: linear-gradient(135deg, #2d8a1d 0%, #1e6b14 100%);transform: translateY(-1px);box-shadow: 0 2px 8px rgba(66, 183, 42, 0.3)}
@media (max-width: 768px) {.fishing-report-new-container {max-width: 480px;padding: 0 20px 20px}
.step-panel {max-height: calc(100dvh - 310px)}
.step-content {padding: 24px 20px}
.step-navigation {padding: 16px 4px 8px}
.step-prev-btn,
.step-next-btn {width: 44px;height: 44px}
.step-prev-btn svg,
.step-next-btn svg {width: 26px;height: 26px}}
@media (max-width: 480px) {.fishing-report-new-container {max-width: 100%;padding: 4px 12px 16px}
.quota-hint {padding: 6px 10px;margin-bottom: 10px}
.quota-hint-text {font-size: 12px}
.step-bar-container {margin-bottom: 14px;padding: 0 2px}
.step-bar-track {height: 8px;margin-bottom: 8px}
.step-bar-fish {width: 30px;height: 18px}
.step-bar-label-dot {width: 11px;height: 11px}
.step-bar-label-text {font-size: 10px}
.step-bar-bubbles .bubble {width: 3px;height: 3px}
.step-panel {max-height: calc(100dvh - 270px - env(safe-area-inset-bottom, 0px))}
.step-content {padding: 20px 14px;border-radius: 14px}
.step-title {font-size: 0.95rem;margin-bottom: 10px}
.step-photo-preview {aspect-ratio: 16 / 9}
.step-photo-placeholder svg {width: 36px;height: 36px}
.step-photo-placeholder span {font-size: 0.8rem}
.step-comment-input {height: 60px}
.step-map,
.step-map-section #map {min-height: 150px}
.step-field-label {font-size: 12px;margin-bottom: 4px}
.location-type-grid {gap: 6px}
.location-type-chip {padding: 8px 4px}
.location-type-icon {width: 24px;height: 24px}
.location-type-label {font-size: 0.6em}
.step-fields-row {flex-direction: row;gap: 8px}
.step-detail-fields {gap: 20px}
.step-input {padding: 10px 12px;font-size: 14px}
.step-navigation {padding: 12px 2px 4px}
.step-prev-btn,
.step-next-btn {width: 40px;height: 40px}
.step-prev-btn svg,
.step-next-btn svg {width: 22px;height: 22px}
.tackle-set-option {padding: 12px;gap: 10px}
.tackle-set-name {font-size: 14px;margin-bottom: 4px}
.tackle-item-card-edit {padding: 5px 8px;font-size: 11px}
.tackle-item-icon-edit {width: 14px;height: 14px}
.tackle-card-icon-edit {width: 12px;height: 12px}
.fishing-report-footer-link {margin-top: 16px;padding-top: 12px}
.quota-badge {top: -8px;right: 4px;padding: 3px 8px;gap: 3px}
.quota-badge-label {font-size: 10px}
.quota-badge-count {font-size: 12px}}
@media (max-width: 375px) {.fishing-report-new-container {padding: 2px 8px 12px}
.step-bar-container {margin-bottom: 10px;padding: 0}
.step-bar-track {height: 6px;margin-bottom: 6px}
.step-bar-fish {width: 24px;height: 14px}
.step-bar-label-dot {width: 9px;height: 9px}
.step-bar-label-text {font-size: 9px}
.step-panel {max-height: calc(100dvh - 230px - env(safe-area-inset-bottom, 0px))}
.step-content {padding: 14px 10px;border-radius: 12px}
.step-title {font-size: 0.85rem;gap: 6px;margin-bottom: 8px}
.step-title svg {width: 16px;height: 16px}
.step-description {font-size: 0.8rem;margin-bottom: 10px}
.step-photo-preview {aspect-ratio: 2 / 1}
.step-photo-placeholder svg {width: 28px;height: 28px}
.step-photo-placeholder span {font-size: 0.75rem}
.step-comment-input {height: 56px;font-size: 14px;padding: 10px 12px}
.step-input {padding: 8px 10px;font-size: 14px;border-radius: 8px}
.step-field-label {font-size: 11px}
.step-fields-row {gap: 6px}
.step-detail-fields {gap: 14px}
.caught-at-inputs {gap: 6px}
.caught-at-date-input,
.caught-at-time-input {padding: 10px 8px;font-size: 14px}
.location-type-grid {grid-template-columns: repeat(3, 1fr);gap: 4px}
.location-type-chip {padding: 6px 2px;border-radius: 10px;gap: 4px}
.location-type-icon {width: 20px;height: 20px}
.location-type-label {font-size: 0.55em}
.step-navigation {padding: 8px 0 2px}
.step-prev-btn,
.step-next-btn {width: 36px;height: 36px}
.step-prev-btn svg,
.step-next-btn svg {width: 18px;height: 18px}
.step-map,
.step-map-section #map {min-height: 130px}
.step-location-btn {padding: 10px 14px;font-size: 0.85rem}
.step-privacy-toggle {padding: 8px 10px}
.privacy-toggle-text {font-size: 13px}
.privacy-toggle-hint {font-size: 11px;margin-left: 50px}
.fishing-report-submit-button {padding: 12px 16px;font-size: 0.95rem;border-radius: 10px}
.quota-badge {top: -7px;right: 2px;padding: 2px 6px}
.quota-badge-label {font-size: 9px}
.quota-badge-count {font-size: 11px}
.tackle-set-option {padding: 10px;gap: 8px;border-radius: 10px}
.tackle-set-name {font-size: 13px}
.tackle-item-card-edit {padding: 4px 6px;font-size: 10px}
.photo-warning {font-size: 11px;padding: 8px 10px}}
.image-required-highlight {animation: pulseHighlight 0.5s ease-in-out 3}
@keyframes pulseHighlight {0%, 100% {border-color: #ddd;box-shadow: none}
50% {border-color: #ff6b6b;box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.3)}}
.modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.6);display: flex;align-items: center;justify-content: center;z-index: 9999;padding: 16px}
.modal-overlay.hidden {display: none}
.modal-content {background: #fff;border-radius: 16px;padding: 24px;box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2)}
.ai-recognition-mode-modal {max-width: 400px;width: 90%;max-height: 90vh;overflow-y: auto}
.ai-mode-header {margin-bottom: 16px}
.ai-mode-header-title {display: flex;align-items: center;justify-content: center;gap: 8px;font-size: 1.1rem;font-weight: 700;color: #1c1e21;margin: 0}
.ai-mode-header-title i {color: #3b82f6;font-size: 1rem}
.ai-mode-options {display: flex;flex-direction: column;gap: 10px;margin-bottom: 16px}
.ai-mode-option {padding: 14px;background: #f8f9fa;border: 2px solid #e4e6eb;border-radius: 12px;cursor: pointer;transition: all 0.2s ease}
.ai-mode-option:hover {border-color: #3b82f6;background: #eff6ff}
.ai-mode-option:active {transform: scale(0.99)}
.ai-mode-option.selected {border-color: #3b82f6;background: #eff6ff;box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15)}
.ai-mode-option-main {display: flex;align-items: flex-start;gap: 12px}
.ai-mode-radio {display: flex;align-items: center;justify-content: center;width: 22px;height: 22px;flex-shrink: 0;margin-top: 2px}
.ai-mode-radio-circle {width: 20px;height: 20px;border: 2px solid #d1d5db;border-radius: 50%;transition: all 0.2s ease;position: relative}
.ai-mode-option.selected .ai-mode-radio-circle {border-color: #3b82f6}
.ai-mode-option.selected .ai-mode-radio-circle::after {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 10px;height: 10px;background: #3b82f6;border-radius: 50%}
.ai-mode-option-content {flex: 1;min-width: 0}
.ai-mode-option-title-row {display: flex;align-items: center;gap: 8px;margin-bottom: 4px}
.ai-mode-option-icon-inline {display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;border-radius: 6px;flex-shrink: 0}
.ai-mode-option-icon-inline.sync {background: #fef3c7}
.ai-mode-option-icon-inline.sync i {font-size: 0.75rem;color: #d97706}
.ai-mode-option-icon-inline.async {background: #dbeafe}
.ai-mode-option-icon-inline.async i {font-size: 0.75rem;color: #2563eb}
.ai-mode-option-title {font-size: 0.95rem;font-weight: 600;color: #1c1e21;margin: 0}
.ai-mode-tag {padding: 2px 6px;font-size: 0.6rem;font-weight: 600;border-radius: 4px}
.ai-mode-tag.recommended {background: #dcfce7;color: #16a34a}
.ai-mode-option-desc {font-size: 0.8rem;color: #606770;margin: 0 0 8px 0}
.ai-mode-option-detail {display: flex;flex-direction: column;gap: 4px}
.ai-mode-detail-item {display: flex;align-items: center;gap: 6px;font-size: 0.75rem;padding: 4px 8px;border-radius: 6px}
.ai-mode-detail-item i {font-size: 0.7rem;flex-shrink: 0}
.ai-mode-detail-item.warning {background: #fef3c7;color: #92400e}
.ai-mode-detail-item.success {background: #dcfce7;color: #166534}
.ai-mode-detail-item.info {background: #dbeafe;color: #1e40af}
.ai-mode-footer-note {display: flex;align-items: center;justify-content: center;gap: 8px;font-size: 0.8rem;color: #4b5563;background: #f3f4f6;padding: 10px 14px;border-radius: 8px;margin: 0}
.ai-mode-footer-note i {font-size: 0.9rem;color: #3b82f6}
.ai-mode-actions {margin-top: 16px;padding-top: 16px;border-top: 1px solid #e4e6eb}
.ai-mode-confirm-btn {width: 100%;padding: 12px 20px;font-size: 0.95rem;font-weight: 600;color: #fff;background: #3b82f6;border: none;border-radius: 8px;cursor: pointer;transition: all 0.2s ease}
.ai-mode-confirm-btn:hover:not(:disabled) {background: #2563eb}
.ai-mode-confirm-btn:active:not(:disabled) {transform: scale(0.98)}
.ai-mode-confirm-btn:disabled {background: #d1d5db;cursor: not-allowed}
.ai-mode-error {background: #fee2e2;color: #dc2626;padding: 10px 14px;border-radius: 8px;font-size: 0.85rem;text-align: center;margin-top: 12px}