body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.option-label { display: flex; align-items: center; padding: 0.75rem; border-radius: 0.375rem; cursor: pointer; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; border: 1px solid #e5e7eb; margin-bottom: 0.5rem; }
.option-label:hover:not(.disabled) { background-color: #f0f9ff; border-color: #bfdbfe; }
.option-label input[type="radio"] { accent-color: #3b82f6; flex-shrink: 0; }
.option-label input[type="radio"]:checked + span { font-weight: 600; color: #1d4ed8; }
.option-label span { margin-left: 0.75rem; display: block; line-height: 1.4; }
.option-label.disabled { opacity: 0.6; cursor: not-allowed; background-color: #f3f4f6; }
.tooltip { position: relative; display: inline-block; cursor: help; }
.tooltip .tooltiptext { visibility: hidden; width: 240px; background-color: #374151; color: #fff; text-align: left; border-radius: 0.375rem; padding: 0.75rem 1rem; position: absolute; z-index: 10; bottom: 135%; left: 50%; margin-left: -120px; opacity: 0; transition: opacity 0.3s, transform 0.3s; font-size: 0.875rem; line-height: 1.5; font-weight: normal; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(5px); }
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; transform: translateY(0); }
.breakdown-trigger-icon { display: inline-flex; align-items: center; justify-content: center; margin-left: 0.5rem; color: #4f46e5; border: 1px solid #a5b4fc; background-color: #e0e7ff; border-radius: 50%; width: 24px; height: 24px; line-height: 1; font-size: 0.875rem; font-weight: bold; cursor: pointer; transition: background-color 0.2s, transform 0.2s; }
.breakdown-trigger-icon:hover { background-color: #c7d2fe; transform: scale(1.1); }
table thead th { position: sticky; top: 0; z-index: 1; background-color: #eef2ff; color: #3730a3; font-weight: 600; padding-top: 0.875rem; padding-bottom: 0.875rem; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
table td, table th { word-break: break-word; vertical-align: top; }
.note-card, .recommendation-user-card { background-color: #fffbeb; border-left: 4px solid #f59e0b; padding: 1rem; margin-bottom: 1rem; border-radius: 0.375rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: box-shadow 0.2s ease-in-out; }
.note-card:hover, .recommendation-user-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.07); }
.note-city, .recommendation-city { font-weight: 600; color: #d97706; margin-bottom: 0.25rem; }
.note-text, .recommendation-desc { font-size: 0.875rem; color: #374151; white-space: pre-wrap; word-wrap: break-word; line-height: 1.6; }
.recommendation-title { font-weight: 700; color: #1f2937; margin-bottom: 0.1rem; }
.timestamp { font-size: 0.75rem; color: #9ca3af; margin-top: 0.5rem; text-align: right; }
.tab-button { padding: 0.625rem 1rem; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-weight: 500; color: #4b5563; margin-bottom: -2px; white-space: nowrap; transition: color 0.2s, border-color 0.2s; font-size: 0.875rem; }
@media (min-width: 640px) { .tab-button { padding: 0.75rem 1.5rem; font-size: 0.925rem; } }
.tab-button:hover { color: #4f46e5; border-bottom-color: #a5b4fc; }
.tab-button.active { border-bottom-color: #4f46e5; color: #4338ca; background-color: transparent; font-weight: 600; }
.tab-content { border: 1px solid #d1d5db; border-radius: 0 0.5rem 0.5rem 0.5rem; padding: 1.5rem; background-color: white; box-shadow: 0 3px 8px rgba(0,0,0,0.06); }
@media (min-width: 768px) { .tab-content { padding: 2rem; } }
.recommendation-curated-card { background-color: #f9fafb; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1.25rem; margin-bottom: 1rem; height: 100%; display: flex; flex-direction: column; transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; }
.recommendation-curated-card:hover { box-shadow: 0 6px 12px rgba(0,0,0,0.08); transform: translateY(-3px); }
.recommendation-curated-card h4 { font-weight: 600; color: #4338ca; margin-bottom: 0.375rem; font-size: 1rem; }
.recommendation-curated-card p { font-size: 0.875rem; color: #475569; line-height: 1.6; flex-grow: 1; }
.recommendation-curated-card .location { font-size: 0.8rem; color: #64748b; font-style: italic; margin-top: 0.375rem; }
.button-primary { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.25rem; border: 1px solid transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; border-radius: 0.375rem; color: white; background-color: #4f46e5; transition: background-color 0.2s, transform 0.1s; }
.button-primary:hover { background-color: #4338ca; }
.button-primary:active { transform: scale(0.98); }
.button-primary:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #6366f1, 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.button-primary:disabled { background-color: #9ca3af; cursor: not-allowed; opacity: 0.7; }
.button-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.25rem; border: 1px solid #d1d5db; background-color: white; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; border-radius: 0.375rem; color: #374151; transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.1s; }
.button-secondary:hover { background-color: #eef2ff; color: #4338ca; border-color: #a5b4fc; }
.button-secondary:active { transform: scale(0.98); }
.cost-breakdown-popup { z-index: 20; width: 280px; background-color: white; border: 1px solid #d1d5db; border-radius: 0.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.15); padding: 1.25rem; }
@media (min-width: 640px) { .cost-breakdown-popup { width: 340px; } }
.cost-breakdown-popup ul { list-style: none; padding: 0; margin: 0; }
.cost-breakdown-popup li { padding: 0.375rem 0; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
.cost-breakdown-popup li:last-child { border-bottom: none; }
.cost-breakdown-popup strong { color: #4b5563; font-weight: 500; margin-right: 0.75rem; }
.cost-breakdown-popup span { color: #1f2937; font-weight: 600; text-align: right; }
.cost-breakdown-popup .total-row { border-top: 1px solid #9ca3af; margin-top: 0.75rem; padding-top: 0.75rem; }
.cost-breakdown-popup .total-row strong { color: #166534; font-weight: 700; }
.cost-breakdown-popup .total-row span { color: #16a34a; font-weight: 700; }
.modal-overlay { position: fixed; inset: 0; background-color: rgba(17, 24, 39, 0.8); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; backdrop-filter: blur(4px); }
.modal-content { background-color: white; padding: 2rem 2.5rem; border-radius: 0.75rem; box-shadow: 0 15px 30px rgba(0,0,0,0.25); max-width: 90vw; max-height: 90vh; overflow-y: auto; width: 600px; }
.modal-content h2 { margin-bottom: 1.75rem; font-size: 1.5rem; font-weight: 700; color: #111827; }
.modal-content label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 500; color: #374151; }
.modal-content input[type="number"], .modal-content input[type="text"], .modal-content textarea { width: 100%; padding: 0.625rem; border: 1px solid #d1d5db; border-radius: 0.375rem; margin-bottom: 1rem; font-size: 0.875rem; transition: border-color 0.2s, box-shadow 0.2s; }
.modal-content input[type="number"]:focus, .modal-content input[type="text"]:focus, .modal-content textarea:focus { border-color: #4f46e5; outline: none; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3); }
.modal-content input[type="number"]::-webkit-outer-spin-button, .modal-content input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.modal-content .button-group { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 2rem; }
.editable-itinerary-input, .editable-itinerary-textarea { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: inherit; line-height: 1.6; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); transition: border-color 0.2s, box-shadow 0.2s; }
.editable-itinerary-textarea { min-height: 100px; resize: vertical; }
.editable-itinerary-input:focus, .editable-itinerary-textarea:focus { border-color: #4f46e5; outline: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), 0 0 0 2px rgba(79, 70, 229, 0.3); }
.expense-input { width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; text-align: right; transition: border-color 0.2s, box-shadow 0.2s; }
.expense-input:focus { border-color: #4f46e5; outline: none; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3); }
.remove-button, .edit-button { background: none; border: none; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0.25rem; margin-left: 0.5rem; transition: color 0.2s, transform 0.2s; }
.remove-button { color: #ef4444; }
.remove-button:hover { color: #dc2626; transform: scale(1.1); }
.edit-button { color: #4f46e5; margin-left: 0; margin-right: 0.5rem; }
.edit-button:hover { color: #4338ca; transform: scale(1.1); }
.todo-item { display: flex; align-items: center; padding: 0.75rem 0; border-bottom: 1px dashed #e5e7eb; }
.todo-item:last-child { border-bottom: none; }
.todo-checkbox { margin-right: 0.75rem; height: 1.125rem; width: 1.125rem; accent-color: #4f46e5; cursor: pointer; flex-shrink: 0; }
.todo-text { flex-grow: 1; font-size: 0.9rem; color: #374151; line-height: 1.5; }
.todo-text.completed { text-decoration: line-through; color: #9ca3af; }
.activity-summary-trigger { text-align: left; width: 100%; padding: 0.25rem; margin: -0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; line-height: 1.5; cursor: pointer; display: block; }
.activity-summary-trigger:hover, .activity-summary-trigger:focus { background-color: #eef2ff; outline: none; }
.activity-detail-box { position: absolute; z-index: 30; background-color: white; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); border: 1px solid #d1d5db; max-width: 90vw; width: 420px; max-height: 70vh; overflow-y: auto; }
@media (max-width: 640px) { .activity-detail-box { width: calc(100vw - 2rem); left: 1rem !important; transform: none !important; } }

.itinerary-table-day { width: 3rem; padding-left: 0.5rem; padding-right: 0.5rem; text-align: center; }
.itinerary-table-date { width: 5.5rem; padding-left: 0.5rem; padding-right: 0.5rem; }
.itinerary-table-city { width: 6rem; padding-left: 0.5rem; padding-right: 0.5rem; }
.itinerary-table-activity { padding-left: 0.75rem; padding-right: 0.75rem; }
@media (min-width: 640px) {
  .itinerary-table-day { width: 4rem; padding-left: 0.75rem; padding-right: 0.75rem; }
  .itinerary-table-date { width: 8rem; padding-left: 0.75rem; padding-right: 0.75rem; }
  .itinerary-table-city { width: 10rem; padding-left: 0.75rem; padding-right: 0.75rem; }
  .itinerary-table-activity { padding-left: 1rem; padding-right: 1rem; }
}

.settings-section-label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 500; color: #374151; }