/************************************
** ★★★Travel Log start
************************************/

.tl-app {
    max-width: 720px !important;
    margin: 0 auto !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    background: #fff !important;
    border: 1px solid #e8edf2 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    padding: 24px 20px !important;
}

@media (max-width: 480px) {
    .tl-app {
        padding: 16px 14px !important;
    }
}

.tl-app * {
    box-sizing: border-box !important;
}

.tl-app .tl-nav {
    background: #f4f6f8 !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    margin-bottom: 20px !important;
}

.tl-app .tl-nav-user {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 12px !important;
    align-items: start !important;
    margin-bottom: 12px !important;
}

.tl-app .tl-nav-user-info {
    display: grid !important;
    row-gap: 4px !important;
    min-width: 0 !important;
}

.tl-app .tl-nav-user-name {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.tl-app .tl-nav-user-name strong {
    font-size: 1.05em !important;
}

.tl-app .tl-nav-user-token {
    color: #888 !important;
    font-size: 0.82em !important;
}

.tl-app .tl-nav .tl-user-icon,
.tl-app .tl-nav .tl-user-icon-placeholder {
    width: 52px !important;
    height: 52px !important;
    font-size: 24px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

.tl-app .tl-fav-btn {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    margin-top: 8px !important;
    background: #fff !important;
    color: #555 !important;
    border: 1px solid #ccc !important;
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-size: 0.8em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.tl-app .tl-fav-btn:hover,
.tl-app .tl-fav-btn.tl-fav-active {
    background: #fef2f2 !important;
    border-color: #f87171 !important;
    color: #dc2626 !important;
}

.tl-app .tl-user-directory-item .tl-fav-btn {
    grid-column: auto !important;
    display: block !important;
    margin: 4px 0 0 44px !important;
}

.tl-app .tl-nav-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.tl-app .tl-nav-links a {
    display: inline-block !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid #e2e5ea !important;
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.85em !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}

.tl-app .tl-nav-links a:hover {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #2563eb !important;
}

.tl-app .tl-breadcrumb {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
    font-size: 0.82em !important;
    color: #888 !important;
    margin-bottom: 10px !important;
}

.tl-app .tl-breadcrumb-path {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.tl-app .tl-breadcrumb a {
    color: #2563eb !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

.tl-app .tl-breadcrumb a:hover {
    text-decoration: underline !important;
}

.tl-app .tl-breadcrumb a.tl-breadcrumb-fav-link {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid #e2e5ea !important;
    color: #333 !important;
    font-weight: 600 !important;
    font-size: 0.85em !important;
    white-space: nowrap !important;
}

.tl-app .tl-breadcrumb a.tl-breadcrumb-fav-link:hover {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #2563eb !important;
    text-decoration: none !important;
}

.tl-app .tl-breadcrumb-sep {
    color: #ccc !important;
}

.tl-app .tl-breadcrumb-current {
    color: #888 !important;
}

@media (max-width: 480px) {
    .tl-app .tl-nav .tl-user-icon,
    .tl-app .tl-nav .tl-user-icon-placeholder {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
    }
    .tl-app .tl-nav-user-name strong {
        font-size: 0.98em !important;
    }
    .tl-app .tl-social-chip {
        font-size: 0.74em !important;
        padding: 2px 8px !important;
    }
}

.tl-app .tl-hint {
    color: #666 !important;
    font-size: 0.9em !important;
}

.tl-app .tl-error {
    color: #b3261e !important;
    font-weight: 600 !important;
}

.tl-app .tl-recovery-flash {
    background: #fff8e1 !important;
    border: 1px solid #f0d78c !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin-bottom: 16px !important;
}

.tl-app .tl-recovery-flash-title {
    margin: 0 0 8px !important;
    font-weight: 700 !important;
}

.tl-app .tl-recovery-code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
    font-size: 1.3em !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    background: #fff !important;
    border: 1px dashed #d8c078 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    display: inline-block !important;
    margin: 0 0 8px !important;
}

.tl-app .tl-recovery-details {
    margin-top: 10px !important;
    font-size: 0.9em !important;
}

.tl-app .tl-recovery-details summary {
    cursor: pointer !important;
    color: #2563eb !important;
}

.tl-app .tl-recovery-details .tl-form {
    margin-top: 10px !important;
}

.tl-app .tl-notice {
    background: #fffbeb !important;
    border-color: #f5d98a !important;
}

.tl-app .tl-notice p {
    margin: 0 0 10px !important;
}

.tl-app .tl-card {
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin-bottom: 16px !important;
}

.tl-app .tl-card summary {
    cursor: pointer !important;
    font-weight: 600 !important;
}

.tl-app .tl-card-heading {
    font-size: 1.05em !important;
    font-weight: 700 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.tl-app .tl-card-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tl-app .tl-card-title {
    font-size: 1.05em !important;
    margin-bottom: 4px !important;
}

.tl-app .tl-card-meta {
    color: #555 !important;
    font-size: 0.9em !important;
    margin-bottom: 6px !important;
}

.tl-app .tl-stars {
    color: #e0a800 !important;
}

.tl-app .tl-stars-difficulty {
    color: #0891b2 !important;
    font-weight: 600 !important;
}

.tl-app .tl-form label {
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 0.88em !important;
}

.tl-app .tl-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 12px !important;
}

@media (max-width: 480px) {
    .tl-app .tl-row-2 {
        grid-template-columns: 1fr !important;
    }
}

.tl-app .tl-form input,
.tl-app .tl-form select,
.tl-app .tl-form textarea {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    padding: 8px !important;
    font-size: 16px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #111 !important;
}

.tl-app .tl-form input[readonly] {
    background: #f4f6f8 !important;
    color: #333 !important;
}

.tl-app .tl-required-mark {
    color: #b3261e !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
}

.tl-app .tl-form textarea {
    min-height: 60px !important;
}

.tl-app .tl-form textarea.tl-textarea-lg {
    min-height: 150px !important;
}

.tl-app .tl-inline-form {
    display: flex !important;
    gap: 8px !important;
}

.tl-app .tl-inline-form input {
    flex: 1 !important;
    padding: 8px !important;
    font-size: 16px !important;
}

.tl-app .tl-filter-form {
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    margin-bottom: 16px !important;
}

.tl-app .tl-filter-form label {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    font-size: 0.85em !important;
    color: #555 !important;
    flex: 1 !important;
    min-width: 140px !important;
    font-weight: 600 !important;
}

.tl-app .tl-filter-form select {
    padding: 8px !important;
    font-size: 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
}

.tl-app .tl-filter-box {
    background: #f4f7fb !important;
    border: 1px solid #dde3ee !important;
    border-radius: 10px !important;
    padding: 20px 24px !important;
    margin-bottom: 24px !important;
}

.tl-app .tl-filter-box h3 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.tl-app .tl-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
}

@media (max-width: 700px) {
    .tl-app .tl-filter-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 480px) {
    .tl-app .tl-filter-grid { grid-template-columns: 1fr !important; }
}

.tl-app .tl-filter-item label {
    display: block !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #555 !important;
    margin-bottom: 4px !important;
}

.tl-app .tl-filter-item input[type="text"],
.tl-app .tl-filter-item input[type="number"],
.tl-app .tl-filter-item select {
    display: block !important;
    width: 100% !important;
    padding: 7px 10px !important;
    font-size: 0.9rem !important;
    border: 1px solid #ccd3e0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #333 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.tl-app .tl-filter-item--wide {
    grid-column: span 2 !important;
}

@media (max-width: 480px) {
    .tl-app .tl-filter-item--wide { grid-column: span 1 !important; }
}

.tl-app .tl-filter-range {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
}

.tl-app .tl-filter-range span {
    color: #888 !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
}

.tl-app .tl-filter-range input {
    flex: 1 !important;
    min-width: 0 !important;
}

.tl-app .tl-filter-actions {
    display: flex !important;
    gap: 10px !important;
    margin-top: 16px !important;
    justify-content: flex-end !important;
}

.tl-app .tl-result-header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
}

.tl-app .tl-result-header h3 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.tl-app .tl-count {
    font-size: 0.85rem !important;
    color: #888 !important;
    margin-left: 10px !important;
}

.tl-app .tl-route-compare-wrap {
    overflow-x: auto !important;
    margin-bottom: 12px !important;
    border: 1px solid #e2e5ea !important;
    border-radius: 8px !important;
}

.tl-app table.tl-route-compare {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.86em !important;
    white-space: nowrap !important;
}

.tl-app table.tl-route-compare th,
.tl-app table.tl-route-compare td {
    padding: 8px 10px !important;
    text-align: left !important;
    border-bottom: 1px solid #eee !important;
}

.tl-app table.tl-route-compare th {
    background: #eef2f7 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.tl-app table.tl-route-compare td.tl-num {
    font-variant-numeric: tabular-nums !important;
    text-align: right !important;
}

.tl-app table.tl-route-compare tr:last-child td {
    border-bottom: none !important;
}

.tl-app table.tl-route-compare tbody tr:nth-child(even) td {
    background: #f9fafb !important;
}

.tl-app table.tl-route-compare tbody tr:hover td {
    background: #eef5fc !important;
}

.tl-app table.tl-route-compare td.tl-route-cell {
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.7 !important;
    min-width: 330px !important;
}

.tl-app .tl-route-line-business {
    color: #5b21b6 !important;
    font-weight: 600 !important;
}

.tl-app .tl-route-line-first {
    color: #92400e !important;
    font-weight: 600 !important;
}

.tl-app .tl-map {
    aspect-ratio: 2 / 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 8px !important;
    margin: 0 auto 12px !important;
    z-index: 0 !important;
}

.tl-app .tl-card-byline {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.85em !important;
    color: #555 !important;
    margin-bottom: 8px !important;
    text-decoration: none !important;
}

.tl-app .tl-card-byline a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #555 !important;
    text-decoration: none !important;
}

.tl-app .tl-card-byline a:hover {
    color: #2563eb !important;
}

.tl-app .tl-card-byline .tl-user-icon,
.tl-app .tl-card-byline .tl-user-icon-placeholder {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
    margin-right: 0 !important;
}

.tl-app button,
.tl-app .tl-form button {
    background: #2563eb !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 18px !important;
    font-size: 16px !important;
    cursor: pointer !important;
}

.tl-app button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.tl-app .tl-btn-reset {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    color: #555 !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    padding: 10px 18px !important;
    font-size: 16px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.tl-app .tl-btn-reset:hover {
    background: #f4f6f8 !important;
    color: #2563eb !important;
    border-color: #2563eb !important;
}

.tl-app .tl-photo-upload {
    margin-top: 12px !important;
}

.tl-app .tl-danger {
    background: #b3261e !important;
    margin-top: 8px !important;
}

.tl-app .tl-year {
    margin-top: 24px !important;
    border-bottom: 2px solid #eee !important;
    padding-bottom: 4px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 8px !important;
}

.tl-app .tl-year-summary {
    font-size: 0.6em !important;
    font-weight: normal !important;
    color: #555 !important;
}

.tl-app .tl-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
}

.tl-app .tl-tab {
    display: inline-block !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    background: #f0f0f0 !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 0.9em !important;
}

.tl-app .tl-tab-active {
    background: #2563eb !important;
    color: #fff !important;
}

.tl-app .tl-value-per-mile {
    color: #065f46 !important;
    font-size: 0.85em !important;
    display: block !important;
}

.tl-app .tl-trip-list {
    list-style: none !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
}

.tl-app .tl-trip-list li {
    padding: 10px 0 !important;
    border-bottom: 1px solid #eee !important;
}

.tl-app .tl-trip-list a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    color: #111 !important;
}

.tl-app .tl-trip-thumb {
    width: 56px !important;
    height: 56px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.tl-app .tl-trip-thumb-placeholder {
    background: #e5e7eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='2' fill='%239ca3af'/%3E%3Cpath d='M3 18l5-6 4 4 3-4 6 8H3z' fill='%239ca3af'/%3E%3C/svg%3E") center/50% no-repeat !important;
}

.tl-app .tl-trip-list-info {
    min-width: 0 !important;
}

.tl-app .tl-badge {
    display: inline-block !important;
    font-size: 0.75em !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: #e5e7eb !important;
    color: #333 !important;
    margin-right: 6px !important;
}

.tl-app .tl-badge-done {
    background: #d1fae5 !important;
    color: #065f46 !important;
}

.tl-app .tl-badge-booked {
    background: #dbeafe !important;
    color: #1e40af !important;
}

.tl-app .tl-badge-cancelled {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.tl-app .tl-badge-candidate {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.tl-app .tl-badge-rejected {
    background: #e5e7eb !important;
    color: #555 !important;
}

.tl-app .tl-table-wrap {
    overflow-x: auto !important;
    margin-bottom: 20px !important;
}

.tl-app .tl-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.9em !important;
}

.tl-app .tl-table th,
.tl-app .tl-table td {
    border: 1px solid #eee !important;
    padding: 8px !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.tl-app .tl-itinerary-card {
    background: #fafbfc !important;
    border-color: #ccc !important;
}

.tl-app .tl-itinerary-summary {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    margin: 10px 0 !important;
}

.tl-app .tl-itinerary-summary span {
    display: inline-block !important;
    white-space: nowrap !important;
    background: #f4f6f8 !important;
    color: #444 !important;
    font-size: 0.82em !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    border: 1px solid #e5e7eb !important;
}

.tl-app .tl-itinerary-summary .tl-value-per-mile {
    display: inline-block !important;
    background: #d1fae5 !important;
    color: #065f46 !important;
    border-color: #a7f3d0 !important;
    font-weight: 600 !important;
}

.tl-app .tl-itinerary-summary-inline {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
}

.tl-app .tl-itinerary-summary-inline span {
    display: inline-block !important;
    white-space: nowrap !important;
    background: #f4f6f8 !important;
    color: #444 !important;
    font-size: 0.78em !important;
    font-weight: 500 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    border: 1px solid #e5e7eb !important;
}

.tl-app .tl-range-inputs {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.tl-app .tl-range-inputs input {
    width: 80px !important;
}

.tl-app h4 {
    margin: 18px 0 8px !important;
    font-size: 1em !important;
}

.tl-app .tl-photos {
    margin: 10px 0 !important;
}

.tl-app .tl-photo-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.tl-app .tl-photo-item {
    position: relative !important;
    width: 88px !important;
    height: 88px !important;
}

.tl-app .tl-photo-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
}

.tl-app .tl-photo-item form.tl-photo-delete-form {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
}

.tl-app .tl-photo-delete {
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    line-height: 20px !important;
    border-radius: 50% !important;
    background: #b3261e !important;
    font-size: 13px !important;
}

.tl-app .tl-photo-item form.tl-cover-set-form {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
}

.tl-app .tl-cover-set-btn {
    display: block !important;
    width: 100% !important;
    padding: 2px 0 !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    border-radius: 0 0 6px 6px !important;
    background: rgba(0, 0, 0, 0.55) !important;
}

.tl-app .tl-cover-badge {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    text-align: center !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    padding: 2px 0 !important;
    border-radius: 0 0 6px 6px !important;
    background: rgba(217, 119, 6, 0.85) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.tl-app .tl-photo-lightbox-trigger {
    cursor: zoom-in !important;
}

.tl-lightbox-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.85) !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    cursor: zoom-out !important;
}

.tl-lightbox-overlay.tl-lightbox-open {
    display: flex !important;
}

.tl-lightbox-overlay img {
    max-width: 92vw !important;
    max-height: 92vh !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

.tl-app .tl-photo-upload {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

.tl-app .tl-photo-upload input[type="file"] {
    flex: 1 !important;
    min-width: 160px !important;
    padding: 6px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    font-size: 0.85em !important;
}

.tl-app .tl-section-title {
    display: inline-block !important;
    background: #333 !important;
    color: #fff !important;
    font-size: 0.75em !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.05em !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    margin: 18px 0 10px !important;
    border-bottom: none !important;
    line-height: 1.4 !important;
}

.tl-app .tl-radio-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    padding: 4px 0 12px !important;
}

.tl-app .tl-radio-group label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.tl-app .tl-radio-group input[type="radio"] {
    display: inline-block !important;
    width: auto !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.tl-app .tl-star-group {
    display: flex !important;
    gap: 6px !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    padding: 4px 0 !important;
}

.tl-app .tl-star-group input {
    display: none !important;
}

.tl-app .tl-star-group label {
    font-size: 1.6rem !important;
    color: #ddd !important;
    cursor: pointer !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

.tl-app .tl-star-group input:checked ~ label,
.tl-app .tl-star-group label:hover,
.tl-app .tl-star-group label:hover ~ label {
    color: #f39c12 !important;
}

.tl-app .tl-route-rows {
    margin-bottom: 8px !important;
}

.tl-app .tl-route-row {
    background: #fafbfc !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}

.tl-app .tl-route-row-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.tl-app .tl-route-row-label {
    font-size: 0.78em !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.tl-app .tl-route-row-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px 12px !important;
}

.tl-app .tl-route-row-grid label {
    font-size: 0.85em !important;
    margin-bottom: 8px !important;
}

.tl-app .tl-route-carrier-other {
    margin-top: 4px !important;
}

.tl-app .tl-form button.tl-route-remove {
    background: #fff !important;
    color: #9ca3af !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-size: 0.78em !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}

.tl-app .tl-form button.tl-route-remove:hover {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
}

.tl-app .tl-form button.tl-route-add {
    background: #f0f0f0 !important;
    color: #333 !important;
    margin-bottom: 18px !important;
}

.tl-app .tl-route-view {
    margin: 10px 0 16px !important;
}

.tl-app .tl-route-view-item {
    padding: 10px 0 !important;
    border-bottom: 1px dashed #e5e7eb !important;
}

.tl-app .tl-route-view-item:last-child {
    border-bottom: none !important;
}

.tl-app .tl-route-view-date {
    font-size: 0.78em !important;
    color: #888 !important;
    margin-bottom: 2px !important;
}

.tl-app .tl-route-view-path {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    color: #111 !important;
}

.tl-app .tl-route-view-time {
    font-size: 0.72em !important;
    font-weight: 400 !important;
    color: #666 !important;
}

.tl-app .tl-route-view-arrow {
    color: #2563eb !important;
    font-size: 0.9em !important;
}

.tl-app .tl-route-view-meta {
    font-size: 0.82em !important;
    color: #666 !important;
    margin-top: 2px !important;
}

.tl-app .tl-crosspost-box {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin: 12px 0 !important;
}

.tl-app .tl-crosspost-box label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 600 !important;
}

.tl-app .tl-crosspost-box input[type="checkbox"] {
    display: inline-block !important;
    width: auto !important;
}

@media (max-width: 480px) {
    .tl-app .tl-route-row-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

.tl-app .tl-edit-lock {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid #eee !important;
}

.tl-app .tl-edit-lock-status {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

.tl-app .tl-edit-lock .tl-inline-form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 6px !important;
}

.tl-app .tl-badge-unlocked {
    background: #d1fae5 !important;
    color: #065f46 !important;
    font-size: 0.85em !important;
    padding: 5px 12px !important;
}

.tl-app .tl-lock-form {
    display: inline-block !important;
}

.tl-app .tl-link-btn {
    background: none !important;
    color: #2563eb !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0.85em !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

.tl-app .tl-settings-panel {
    margin-top: 12px !important;
    background: #f8f9fb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 4px 16px 16px !important;
}

.tl-app .tl-settings-panel summary {
    cursor: pointer !important;
    color: #333 !important;
    font-weight: 700 !important;
    font-size: 0.92em !important;
    padding: 12px 0 !important;
}

.tl-app .tl-settings-section {
    padding-top: 14px !important;
    margin-top: 14px !important;
    border-top: 1px dashed #ddd !important;
}

.tl-app .tl-settings-section:first-of-type {
    margin-top: 0 !important;
    border-top: none !important;
}

.tl-app .tl-settings-section .tl-form {
    margin: 0 !important;
}

.tl-app .tl-icon-form {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

.tl-app .tl-icon-form input[type="file"] {
    display: inline-block !important;
    width: auto !important;
    flex: 1 !important;
    min-width: 160px !important;
    margin: 0 !important;
    font-size: 0.85em !important;
    padding: 6px !important;
}

.tl-app .tl-icon-form button {
    margin: 0 !important;
}

.tl-app .tl-icon-preview {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
}

.tl-app .tl-toggle-row {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 0.85em !important;
    color: #444 !important;
}

.tl-app .tl-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 400 !important;
}

.tl-app .tl-checkbox-label input[type="checkbox"] {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.tl-app .tl-user-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
    display: inline-block !important;
}

.tl-app .tl-user-icon-placeholder {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e5e7eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='2' fill='%239ca3af'/%3E%3Cpath d='M3 18l5-6 4 4 3-4 6 8H3z' fill='%239ca3af'/%3E%3C/svg%3E") center / 55% no-repeat !important;
    font-size: 16px !important;
}

.tl-app .tl-user-directory {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tl-app .tl-user-directory-item {
    padding: 12px 8px !important;
    border-radius: 8px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background 0.15s ease !important;
}

.tl-app .tl-user-directory-item:last-child {
    border-bottom: none !important;
}

.tl-app .tl-user-directory-item:hover {
    background: #f8f9fb !important;
}

.tl-app .tl-user-directory-item a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    color: #111 !important;
}

.tl-app .tl-user-directory-item .tl-user-icon,
.tl-app .tl-user-directory-item .tl-user-icon-placeholder {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
}

.tl-app .tl-user-directory-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.tl-app .tl-feed-link-hint {
    color: #2563eb !important;
    font-size: 0.82em !important;
    font-weight: 600 !important;
}

.tl-app .tl-feed-cover {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.tl-app .tl-feed-cover-placeholder {
    background: #e5e7eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='2' fill='%239ca3af'/%3E%3Cpath d='M3 18l5-6 4 4 3-4 6 8H3z' fill='%239ca3af'/%3E%3C/svg%3E") center/50% no-repeat !important;
}

.tl-app .tl-card-byline .tl-feed-cover,
.tl-app .tl-card-byline .tl-feed-cover-placeholder {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
}

.tl-app .tl-sub-feeds {
    margin-top: 4px !important;
}

.tl-app .tl-sub-feeds-label {
    margin: 0 0 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-size: 0.72em !important;
    font-weight: 700 !important;
    color: #999 !important;
}

.tl-app .tl-card-sub {
    background: #fafafa !important;
    border-color: #eee !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
}

.tl-app .tl-card-sub h3 {
    font-size: 0.92em !important;
    color: #666 !important;
    margin-bottom: 10px !important;
}

.tl-app .tl-card-sub .tl-user-directory-item {
    padding: 8px 4px !important;
}

.tl-app .tl-card-sub .tl-feed-cover,
.tl-app .tl-card-sub .tl-feed-cover-placeholder,
.tl-app .tl-card-sub .tl-user-icon,
.tl-app .tl-card-sub .tl-user-icon-placeholder {
    width: 40px !important;
    height: 40px !important;
}

.tl-app .tl-card-hero {
    background: linear-gradient(135deg, #eaf1ff 0%, #ffffff 65%) !important;
    border: 1px solid #bfdbfe !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.10) !important;
    padding: 20px 18px !important;
}

.tl-app .tl-card-hero h3 {
    font-size: 1.25em !important;
    color: #1d4ed8 !important;
    border-bottom: 1px solid #cfe0fb !important;
}

.tl-app .tl-card-hero .tl-user-directory-item {
    padding: 14px 10px !important;
}

.tl-app .tl-card-hero .tl-user-directory-item:hover {
    background: #f2f7ff !important;
}

.tl-app .tl-card-hero .tl-user-icon,
.tl-app .tl-card-hero .tl-user-icon-placeholder {
    width: 56px !important;
    height: 56px !important;
    font-size: 26px !important;
}

.tl-app .tl-card-hero .tl-user-directory-info strong {
    font-size: 1.08em !important;
}

.tl-app .tl-usage-note {
    margin-bottom: 14px !important;
}

.tl-app .tl-usage-note summary {
    color: #2563eb !important;
    font-size: 0.88em !important;
    font-weight: 600 !important;
}

.tl-app .tl-usage-note p {
    margin: 10px 0 0 !important;
}

.tl-app .tl-route-view-item {
    border-left: 4px solid transparent !important;
    padding-left: 10px !important;
}

.tl-app .tl-cabin-border-economy {
    border-left-color: #9ca3af !important;
}

.tl-app .tl-cabin-border-premium {
    border-left-color: #06b6d4 !important;
}

.tl-app .tl-cabin-border-business {
    border-left-color: #7c3aed !important;
}

.tl-app .tl-cabin-border-first {
    border-left-color: #d97706 !important;
}

.tl-app .tl-cabin-chip {
    display: inline-block !important;
    font-size: 0.7em !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    vertical-align: middle !important;
}

.tl-app .tl-cabin-chip.tl-cabin-economy {
    background: #e5e7eb !important;
    color: #374151 !important;
}

.tl-app .tl-cabin-chip.tl-cabin-premium {
    background: #e5e7eb !important;
    color: #374151 !important;
}

.tl-app .tl-cabin-chip.tl-cabin-business {
    background: #ede9fe !important;
    color: #5b21b6 !important;
}

.tl-app .tl-cabin-chip.tl-cabin-first {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.tl-app .tl-social-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.tl-app .tl-social-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid #e2e5ea !important;
    color: #444 !important;
    text-decoration: none !important;
    font-size: 0.78em !important;
    font-weight: 600 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.tl-app .tl-social-chip:hover {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
}

.tl-app .tl-social-chip.tl-social-instagram:hover {
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4) !important;
    border-color: transparent !important;
}

.tl-app .tl-social-chip.tl-social-blog:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
}

.tl-app .tl-user-directory-item .tl-social-links {
    margin-left: 54px !important;
    margin-top: 4px !important;
}

.tl-app h2,
.tl-app h3 {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    font-weight: 700 !important;
}

.tl-app h2 {
    font-size: 1.3em !important;
    margin: 0 0 16px !important;
}

.tl-app .tl-card h3 {
    font-size: 1.02em !important;
    margin: 0 0 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #eee !important;
}

.tl-app .tl-top-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.tl-app .tl-hidden-field {
    opacity: 0.3 !important;
    pointer-events: none !important;
    transition: opacity 0.2s !important;
}

/************************************
** ★★★Travel Log end
************************************/