:root {
--mustard: #ffb800;
--dark-olive: #2b3022;
--charcoal: #2d3748;
--cream: #f9f5f0;
--light-gray: #f8f9fa;
--border-color: #edf2f7;
--muted: #718096;
--soft-muted: #a0aec0;
} .tp-dashboard-wrapper {
padding-top: 72px;
padding-bottom: 56px;
background: var(--cream) !important;
min-height: 100vh;
}
.tp-dashboard-wrapper * {
box-sizing: border-box;
}
.tp-dashboard-wrapper .tp-section-container {
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
background: transparent !important;
box-sizing: border-box;
}
.tp-dashboard-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 22px;
}
.tp-archive-title,
.tp-dashboard-top h1 {
margin: 0;
font-size: 2.15rem;
line-height: 1.15;
color: var(--charcoal);
font-weight: 800;
letter-spacing: -0.025em;
}
.tp-dashboard-layout {
display: flex !important;
gap: 26px !important;
width: 100%;
align-items: flex-start;
} .tp-dashboard-notice,
.tp-plan-notice,
.tp-settings-notice {
padding: 11px 15px;
margin-bottom: 18px;
font-size: 0.9rem;
line-height: 1.45;
border-radius: 8px;
font-weight: 600;
}
.tp-dashboard-notice.success,
.tp-plan-notice.success,
.tp-settings-notice.success {
background: #f0fff4;
border-left: 4px solid #38a169;
color: #2f855a;
}
.tp-dashboard-notice.warning,
.tp-plan-notice.warning,
.tp-settings-notice.warning {
background: #fffaf0;
border-left: 4px solid var(--mustard);
color: #9a6b00;
}
.tp-dashboard-notice.error,
.tp-plan-notice.error,
.tp-settings-notice.error {
background: #fff1f1;
border-left: 4px solid #ff4d4d;
color: #d32f2f;
} .tp-dash-sidebar {
flex: 0 0 245px;
position: sticky;
top: 86px;
z-index: 100;
}
.tp-dash-sidebar-inner {
background: #fff;
border-radius: 12px;
border: 1px solid var(--border-color);
padding: 18px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.02);
}
.tp-dash-nav {
list-style: none !important;
padding: 0 !important;
margin: 0 0 18px 0 !important;
}
.tp-dash-nav li {
margin-bottom: 4px !important;
list-style: none !important;
}
.tp-dash-nav a {
display: flex !important;
align-items: center !important;
gap: 13px !important;
padding: 11px 13px !important;
text-decoration: none !important;
color: #4a5568 !important;
font-size: 0.92rem;
line-height: 1.25;
border-radius: 8px;
transition: 0.25s ease;
font-weight: 600;
}
.tp-dash-nav a:hover {
background: #f7fafc;
}
.tp-dash-nav a i {
font-size: 1rem;
width: 18px;
text-align: center;
color: var(--soft-muted);
flex-shrink: 0;
}
.tp-dash-nav li.active a {
background: #fffaf0 !important;
color: var(--mustard) !important;
}
.tp-dash-nav li.active a i {
color: var(--mustard);
}
.tp-dash-sidebar-actions {
display: flex;
flex-direction: column;
gap: 10px;
} .tp-dashboard-sidebar-stack {
flex: 0 0 245px;
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
position: sticky;
top: 86px;
z-index: 100;
}
.tp-dashboard-sidebar-stack .tp-dash-sidebar {
flex: none;
position: static;
top: auto;
width: 100%;
}
.tp-dashboard-sidebar-stack .tp-dash-sidebar-inner {
width: 100%;
}
.tp-dash-sidebar-helper {
background: #ffffff;
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 20px;
box-shadow: 0 8px 24px rgba(33, 39, 25, 0.05);
}
.tp-dash-sidebar-helper h3 {
margin: 0 0 16px;
color: var(--dark-olive);
font-size: 1.15rem;
line-height: 1.25;
font-weight: 800;
letter-spacing: -0.02em;
}
.tp-dash-sidebar-helper-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.tp-dash-sidebar-helper-list div {
background: #fafbfc;
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 13px 14px;
color: var(--muted);
font-size: 0.88rem;
line-height: 1.45;
}
.tp-dash-sidebar-helper-list strong {
display: block;
margin-bottom: 3px;
color: var(--charcoal);
font-size: 0.9rem;
font-weight: 800;
} .block-btn {
width: 100%;
text-align: center;
display: block;
padding: 12px 14px;
margin-bottom: 0;
border-radius: 8px;
font-weight: 700;
font-size: 0.95rem;
line-height: 1.25;
text-decoration: none !important;
}
.tp-btn-yellow {
background: var(--mustard);
color: #fff !important;
border: none;
}
.tp-btn-yellow:hover {
filter: brightness(0.98);
}
.tp-btn-light {
background: #edf2f7;
color: #4a5568 !important;
border: none;
}
.tp-btn-light:hover {
background: #e2e8f0;
}
.tp-btn-small {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 36px;
padding: 8px 12px;
border-radius: 8px;
font-size: 0.82rem;
font-weight: 800;
line-height: 1;
text-decoration: none !important;
}
.tp-btn-outline-dark {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
padding: 11px 16px;
border-radius: 9px;
border: 1px solid var(--border-color);
background: #fff;
color: var(--charcoal);
font-family: inherit;
font-weight: 700;
text-decoration: none !important;
cursor: pointer;
transition: 0.2s ease;
}
.tp-btn-outline-dark:hover {
border-color: var(--mustard);
color: var(--mustard);
background: #fffaf0;
}
.tp-btn-submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 13px 24px;
border-radius: 10px;
border: none;
background: var(--mustard);
color: #fff;
font-family: inherit;
font-weight: 800;
font-size: 1rem;
cursor: pointer;
text-decoration: none !important;
transition: 0.2s ease;
}
.tp-btn-submit:hover {
transform: translateY(-2px);
filter: brightness(0.98);
}
.tp-btn-inline {
width: auto;
display: inline-flex;
align-items: center;
justify-content: center;
} .tp-dash-content {
flex: 1;
min-width: 0;
}
.tp-dash-main-card {
background: #fff;
border-radius: 16px;
border: 1px solid var(--border-color);
padding: 26px 32px;
margin-bottom: 24px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.02);
}
.tp-dash-user-info {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 22px;
}
.tp-dashboard-card-title {
margin: 0 0 6px 0;
color: var(--dark-olive);
font-size: 1.5rem;
line-height: 1.25;
font-weight: 800;
letter-spacing: -0.02em;
}
.tp-dashboard-card-desc {
margin: 0;
color: var(--muted);
font-size: 0.92rem;
line-height: 1.5;
max-width: 720px;
}
.tp-dashboard-page-action {
width: auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 18px;
white-space: nowrap;
}
.user-meta-wrap {
display: flex;
align-items: center;
gap: 20px;
min-width: 0;
}
.dash-avatar {
width: 76px;
height: 76px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.user-meta-text {
min-width: 0;
}
.user-meta-text h2 {
margin: 0 0 8px 0;
font-size: 1.65rem;
line-height: 1.2;
color: var(--charcoal);
font-weight: 800;
letter-spacing: -0.02em;
}
.tags {
display: flex;
gap: 9px;
align-items: center;
flex-wrap: wrap;
}
.badge-explorer {
background: #fffaf0;
color: var(--mustard);
padding: 4px 11px;
border-radius: 20px;
font-size: 0.78rem;
line-height: 1.2;
font-weight: 700;
}
.member-since {
color: var(--soft-muted);
font-size: 0.82rem;
line-height: 1.2;
}
.badges-wrap h3 {
font-size: 0.78rem;
text-transform: uppercase;
color: var(--soft-muted);
margin: 0 0 10px 0;
letter-spacing: 0.08em;
}
.badges-flex {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.micro-badge {
background: #f8f9fa;
padding: 7px 13px;
border-radius: 20px;
font-size: 0.82rem;
line-height: 1;
font-weight: 600;
display: flex;
align-items: center;
gap: 7px;
border: 1px solid var(--border-color);
color: var(--charcoal);
}
.micro-badge i {
color: var(--mustard);
}
.micro-badge.locked {
opacity: 0.3;
filter: grayscale(1);
} .tp-dash-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 24px;
}
.tp-stat-card-link {
text-decoration: none !important;
color: inherit !important;
}
.tp-stat-card {
background: #fff;
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 20px 24px;
display: flex;
align-items: center;
gap: 18px;
transition: 0.25s ease;
min-height: 86px;
}
.tp-stat-card:hover {
transform: translateY(-3px);
border-color: var(--mustard);
}
.stat-icon {
width: 50px;
height: 50px;
min-width: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.stat-icon-spot {
color: #38b2ac;
background: #e6fffa;
}
.stat-icon-saved {
color: #e74c3c;
background: #fadbd8;
}
.stat-icon-route {
color: #f39c12;
background: #fef5e7;
}
.stat-info {
min-width: 0;
}
.stat-info h3 {
margin: 0;
font-size: 1.85rem;
font-weight: 800;
line-height: 1;
color: var(--charcoal) !important;
}
.stat-info p {
margin: 5px 0 0 0;
color: var(--soft-muted);
font-size: 0.86rem;
line-height: 1.25;
font-weight: 600;
} .tp-dash-widgets-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
}
.tp-widget-box {
background: #fff;
border: 1px solid var(--border-color);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.02);
}
.tp-filter-box {
margin-bottom: 24px;
}
.tp-filter-box .widget-content {
padding: 18px 24px;
}
.widget-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
background: #fafbfc;
}
.widget-header h3 {
margin: 0;
font-size: 1.05rem;
line-height: 1.2;
font-weight: 700;
color: var(--dark-olive);
}
.tp-widget-count {
font-size: 0.85rem;
color: var(--soft-muted);
font-weight: 600;
white-space: nowrap;
}
.view-all {
font-size: 0.82rem;
color: var(--mustard);
font-weight: 700;
text-decoration: none !important;
white-space: nowrap;
}
.view-all:hover {
color: #d99a00;
}
.widget-content {
padding: 20px 24px 24px;
} .mini-spot-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.mini-spot-item {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none !important;
color: inherit !important;
padding: 8px;
border-radius: 10px;
border: 1px solid transparent;
transition: 0.25s ease;
}
.mini-spot-item:hover {
background: #f8f9fa;
border-color: var(--border-color);
}
.mini-img {
width: 46px;
height: 46px;
min-width: 46px;
border-radius: 8px;
overflow: hidden;
background: #edf2f7;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mini-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mini-img i {
color: var(--soft-muted);
}
.mini-img-icon {
color: var(--mustard);
background: #fffaf0;
}
.mini-img-icon i {
color: var(--mustard);
}
.mini-text {
flex: 1;
min-width: 0;
}
.mini-text strong {
display: block;
font-size: 0.92rem;
line-height: 1.25;
color: var(--charcoal);
margin-bottom: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mini-text span {
display: block;
font-size: 0.78rem;
line-height: 1.35;
color: var(--soft-muted);
font-weight: 500;
}
.mini-spot-item .arrow {
color: var(--charcoal);
font-size: 0.95rem;
flex-shrink: 0;
}
.empty-msg {
color: var(--soft-muted);
font-size: 0.88rem;
line-height: 1.4;
text-align: center;
margin: 0;
}
.dashboard-empty-spacing {
margin-bottom: 20px;
} .tp-spots-filter-form {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.tp-dash-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.tp-dash-tabs a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border-radius: 999px;
text-decoration: none !important;
font-weight: 700;
font-size: 0.85rem;
line-height: 1.2;
background: #f8f9fa;
color: #4a5568;
border: 1px solid transparent;
transition: 0.2s ease;
}
.tp-dash-tabs a:hover {
background: #fffaf0;
color: var(--mustard);
border-color: #fde68a;
}
.tp-dash-tabs a.active {
background: #fffaf0;
color: var(--mustard);
border-color: #fde68a;
}
.tp-search-inline {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tp-search-inline input {
height: 38px;
min-width: 220px;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 0 12px;
font-family: inherit;
color: var(--charcoal);
outline: none;
}
.tp-search-inline input:focus {
border-color: var(--mustard);
box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.12);
}
.tp-search-inline button,
.tp-search-inline .tp-search-reset {
height: 38px;
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
padding: 0 13px;
cursor: pointer;
text-decoration: none !important;
font-family: inherit;
font-weight: 700;
} .tp-dash-listings {
display: flex;
flex-direction: column;
gap: 14px;
}
.tp-dash-list-item {
display: flex;
align-items: center;
gap: 16px;
padding: 14px;
border: 1px solid var(--border-color);
border-radius: 14px;
background: #fff;
}
.tp-dash-list-item .item-img {
width: 72px;
height: 72px;
min-width: 72px;
border-radius: 12px;
overflow: hidden;
background: #edf2f7;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.tp-dash-list-item .item-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tp-dash-list-item .item-img i {
color: var(--soft-muted);
font-size: 1.4rem;
}
.tp-dash-list-item .item-info {
flex: 1;
min-width: 0;
}
.tp-dash-list-item .item-cat {
display: inline-block;
color: var(--mustard);
font-size: 0.78rem;
font-weight: 800;
margin-bottom: 4px;
}
.tp-dash-list-item .item-info h3 {
margin: 0 0 7px 0;
font-size: 1.05rem;
line-height: 1.25;
}
.tp-dash-list-item .item-info h3 a {
color: var(--charcoal);
text-decoration: none !important;
}
.tp-dash-list-item .item-info h3 a:hover {
color: var(--mustard);
}
.tp-dash-list-item .item-meta {
display: flex;
gap: 8px 14px;
flex-wrap: wrap;
color: var(--soft-muted);
font-size: 0.82rem;
font-weight: 600;
}
.tp-dash-list-item .item-meta span {
display: inline-flex;
align-items: center;
gap: 5px;
} .tp-my-spot-item {
transition: 0.22s ease;
}
.tp-my-spot-item:hover {
border-color: #e2e8f0;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
}
.tp-my-spot-item .item-info {
min-width: 0;
}
.tp-my-spot-item .item-actions {
display: grid !important;
grid-template-columns: repeat(3, 36px);
gap: 10px 8px;
align-items: center !important;
justify-content: end;
min-width: 150px;
flex-shrink: 0;
}
.tp-my-spot-item .item-actions > a,
.tp-my-spot-item .item-actions > form {
justify-self: end;
}
.tp-spot-status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 7px 11px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 800;
white-space: nowrap;
}
.tp-my-spot-item .tp-spot-status-badge {
grid-column: 1 / -1;
justify-self: end;
} .item-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.item-actions form {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
}
.item-actions a,
.item-actions button {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1 !important;
vertical-align: middle !important;
border-radius: 8px !important;
box-sizing: border-box !important;
transition: 0.2s ease;
}
.item-actions button {
border: none !important;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.item-actions a i,
.item-actions button i {
display: block;
line-height: 1 !important;
font-size: 0.95rem;
margin: 0 !important;
padding: 0 !important;
}
.tp-action-delete,
.tp-plan-action-delete {
background: #fff1f1 !important;
color: #d32f2f !important;
}
.tp-action-delete:hover,
.tp-plan-action-delete:hover {
background: #d32f2f !important;
color: #fff !important;
}
.tp-action-publish {
background: #fffaf0 !important;
color: var(--mustard) !important;
}
.tp-action-publish:hover {
background: var(--mustard) !important;
color: #fff !important;
}
.tp-action-restore {
background: #edf2f7 !important;
color: #4a5568 !important;
}
.tp-action-restore:hover {
background: #4a5568 !important;
color: #fff !important;
} .tp-input-group {
margin-bottom: 18px;
}
.tp-input-group label {
display: block;
margin-bottom: 8px;
font-size: 0.9rem;
font-weight: 700;
color: #4a5568;
}
.tp-input-group label i {
color: var(--mustard);
margin-right: 6px;
}
.tp-input-group input,
.tp-input-group textarea,
.tp-input-group select {
width: 100%;
border: 1px solid var(--border-color);
border-radius: 10px;
background: #fff;
color: var(--charcoal);
font-family: inherit;
font-size: 0.95rem;
line-height: 1.4;
padding: 12px 14px;
box-sizing: border-box;
outline: none;
transition: 0.2s ease;
}
.tp-input-group textarea {
resize: vertical;
min-height: 120px;
}
.tp-input-group input:focus,
.tp-input-group textarea:focus,
.tp-input-group select:focus {
border-color: var(--mustard);
box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.12);
}
.required {
color: #e53e3e;
} .help-box {
background: #fffaf0;
border: 1px dashed #fed7aa;
border-radius: 12px;
padding: 18px 20px;
display: flex !important;
gap: 14px !important;
align-items: flex-start !important;
}
.help-icon {
color: var(--mustard);
font-size: 1.15rem;
margin-top: 1px;
flex-shrink: 0;
}
.help-text strong {
display: block;
margin-bottom: 4px;
color: var(--charcoal);
font-size: 0.92rem;
line-height: 1.25;
}
.help-text p {
margin: 0;
font-size: 0.84rem;
color: var(--muted);
line-height: 1.45;
} .tp-dashboard-empty-state {
text-align: center;
padding: 44px 20px;
}
.tp-dashboard-empty-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: #fffaf0;
color: var(--mustard);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
font-size: 1.8rem;
}
.tp-dashboard-empty-icon.is-history {
background: #e6fffa;
color: #319795;
}
.tp-dashboard-empty-state h3 {
margin: 0 0 8px 0;
color: var(--dark-olive);
font-size: 1.18rem;
line-height: 1.25;
font-weight: 800;
}
.tp-dashboard-empty-state p {
margin: 0 auto 22px;
color: var(--muted);
max-width: 460px;
line-height: 1.5;
font-size: 0.94rem;
}
.tp-empty-action {
width: auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
} .tp-pagination-wrap {
margin-top: 24px;
}
.tp-pagination-wrap .page-numbers,
.tp-dashboard-wrapper .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 12px;
border-radius: 10px;
background: #fff;
border: 1px solid var(--border-color);
color: var(--charcoal);
text-decoration: none !important;
font-weight: 700;
margin-right: 6px;
}
.tp-pagination-wrap .page-numbers.current,
.tp-dashboard-wrapper .page-numbers.current {
background: var(--mustard);
border-color: var(--mustard);
color: #fff;
} .tp-mobile-menu-btn {
display: none;
background: var(--dark-olive);
color: #fff;
border: none;
width: 42px;
height: 42px;
border-radius: 8px;
cursor: pointer;
align-items: center;
justify-content: center;
}
.tp-mobile-menu-btn i {
font-size: 1rem;
} @media (max-width: 1100px) {
.tp-dashboard-wrapper {
padding-top: 28px;
padding-bottom: 40px;
}
.tp-dashboard-wrapper .tp-section-container {
padding-left: 20px;
padding-right: 20px;
}
.tp-dashboard-layout {
flex-direction: column !important;
gap: 0 !important;
width: 100% !important;
}
.tp-dash-content {
width: 100% !important;
flex: none !important;
min-width: 0 !important;
}
.tp-dashboard-wrapper .tp-section-container {
max-width: none !important;
width: 100% !important;
padding-left: 20px;
padding-right: 20px;
}
.tp-dashboard-top {
margin-bottom: 18px;
}
.tp-archive-title,
.tp-dashboard-top h1 {
font-size: 1.75rem;
}
.tp-mobile-menu-btn {
display: flex;
}
.tp-dash-sidebar,
.tp-dashboard-sidebar-stack .tp-dash-sidebar {
position: fixed;
left: -100%;
top: 0;
height: 100vh;
background: #fff;
width: 280px;
max-width: 86vw;
transition: 0.3s ease;
box-shadow: 20px 0 50px rgba(0, 0, 0, 0.1);
padding-top: 80px;
z-index: 10000;
}
.tp-dash-sidebar.active,
.tp-dashboard-sidebar-stack .tp-dash-sidebar.active {
left: 0;
}
.tp-dash-sidebar-inner {
border-radius: 0;
border-left: none;
border-right: none;
box-shadow: none;
}
.tp-dashboard-sidebar-stack {
display: block;
flex: none;
width: 100%;
position: static;
top: auto;
}
.tp-dash-sidebar-helper {
display: none;
}
.tp-dash-stats-grid,
.tp-dash-widgets-row {
grid-template-columns: 1fr;
}
.tp-dash-main-card {
padding: 24px;
}
.tp-dash-user-info {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.tp-dashboard-page-action {
width: auto;
}
.user-meta-wrap {
gap: 16px;
}
.dash-avatar {
width: 68px;
height: 68px;
}
.user-meta-text h2 {
font-size: 1.35rem;
}
.tp-stat-card {
padding: 18px 20px;
}
.widget-header {
padding: 15px 20px;
}
.widget-content {
padding: 18px 20px 22px;
}
.tp-spots-filter-form {
align-items: flex-start;
}
.tp-search-inline {
width: 100%;
}
.tp-search-inline input {
flex: 1;
min-width: 180px;
}
.tp-dash-list-item {
align-items: flex-start;
flex-wrap: wrap;
}
.tp-dash-list-item .item-img {
width: 64px;
height: 64px;
min-width: 64px;
}
.item-actions {
width: 100%;
justify-content: flex-start;
padding-left: 80px;
}
.tp-my-spot-item .item-actions {
width: 100%;
min-width: 0;
padding-left: 80px;
justify-content: start;
grid-template-columns: repeat(3, 36px);
}
.tp-my-spot-item .tp-spot-status-badge {
justify-self: start;
}
} @media (min-width: 769px) and (max-width: 1100px) {
.tp-dashboard-wrapper {
padding-top: 32px;
}
.tp-dashboard-wrapper .tp-section-container {
max-width: none !important;
width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.tp-dashboard-layout {
display: block !important;
width: 100% !important;
}
.tp-dash-content {
width: 100% !important;
max-width: none !important;
}
.tp-dash-main-card,
.tp-widget-box,
.tp-filter-box {
width: 100% !important;
}
.tp-dashboard-page-action {
width: auto;
}
}
@media (max-width: 620px) {
.tp-dashboard-wrapper {
padding-top: 22px;
}
.tp-dashboard-wrapper .tp-section-container {
padding-left: 16px;
padding-right: 16px;
}
.tp-dashboard-top {
gap: 12px;
}
.tp-archive-title,
.tp-dashboard-top h1 {
font-size: 1.55rem;
}
.tp-dash-main-card {
padding: 20px;
border-radius: 14px;
}
.tp-dashboard-card-title {
font-size: 1.28rem;
}
.tp-dashboard-page-action {
width: 100%;
}
.user-meta-wrap {
align-items: flex-start;
}
.dash-avatar {
width: 58px;
height: 58px;
}
.user-meta-text h2 {
font-size: 1.22rem;
}
.tp-stat-card {
gap: 14px;
padding: 16px;
}
.stat-icon {
width: 44px;
height: 44px;
min-width: 44px;
font-size: 1.1rem;
}
.stat-info h3 {
font-size: 1.55rem;
}
.tp-filter-box .widget-content {
padding: 16px;
}
.tp-dash-tabs {
width: 100%;
}
.tp-dash-tabs a {
font-size: 0.8rem;
padding: 8px 10px;
}
.tp-search-inline {
flex-direction: column;
align-items: stretch;
}
.tp-search-inline input,
.tp-search-inline button,
.tp-search-inline .tp-search-reset {
width: 100%;
}
.tp-dash-list-item {
gap: 12px;
}
.tp-dash-list-item .item-img {
width: 58px;
height: 58px;
min-width: 58px;
}
.item-actions {
padding-left: 0;
}
.tp-my-spot-item .item-actions {
padding-left: 0;
justify-content: start;
grid-template-columns: repeat(3, 36px);
}
.tp-my-spot-item .tp-spot-status-badge {
justify-self: start;
width: auto;
}
.mini-spot-item {
gap: 12px;
}
.mini-text strong {
white-space: normal;
}
} .tp-dashboard-wrapper .tp-saved-collections .tp-collection-delete,
.tp-dashboard-wrapper .tp-saved-collections .tp-delete-collection,
.tp-dashboard-wrapper .tp-saved-collections .delete-collection,
.tp-dashboard-wrapper .tp-saved-collections button[name="tp_delete_collection"],
.tp-dashboard-wrapper .tp-saved-collections button[value="delete_collection"],
.tp-dashboard-wrapper .tp-saved-collection-card .tp-collection-delete,
.tp-dashboard-wrapper .tp-saved-collection-card .tp-delete-collection,
.tp-dashboard-wrapper .tp-saved-collection-card .delete-collection,
.tp-dashboard-wrapper .tp-saved-collection-card button[name="tp_delete_collection"],
.tp-dashboard-wrapper .tp-saved-collection-card button[value="delete_collection"],
.tp-dashboard-wrapper .tp-collection-card .tp-collection-delete,
.tp-dashboard-wrapper .tp-collection-card .tp-delete-collection,
.tp-dashboard-wrapper .tp-collection-card .delete-collection,
.tp-dashboard-wrapper .tp-collection-card button[name="tp_delete_collection"],
.tp-dashboard-wrapper .tp-collection-card button[value="delete_collection"],
.tp-dashboard-wrapper .tp-saved-spots-collections .tp-collection-delete,
.tp-dashboard-wrapper .tp-saved-spots-collections .tp-delete-collection,
.tp-dashboard-wrapper .tp-saved-spots-collections .delete-collection,
.tp-dashboard-wrapper .tp-saved-spots-collections button[name="tp_delete_collection"],
.tp-dashboard-wrapper .tp-saved-spots-collections button[value="delete_collection"],
.tp-dashboard-wrapper .tp-saved-collections-form button[name="tp_delete_collection"],
.tp-dashboard-wrapper .tp-saved-collections-form button[value="delete_collection"] {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 42px !important;
border-radius: 12px !important;
border: 1px solid rgba(211, 47, 47, 0.14) !important;
background: #fff7f3 !important;
color: #d32f2f !important;
font-size: 0 !important;
line-height: 1 !important;
font-family: inherit !important;
font-weight: 800 !important;
box-shadow: none !important;
appearance: none !important;
-webkit-appearance: none !important;
cursor: pointer !important;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}
.tp-dashboard-wrapper .tp-saved-collections .tp-collection-delete i,
.tp-dashboard-wrapper .tp-saved-collections .tp-delete-collection i,
.tp-dashboard-wrapper .tp-saved-collections .delete-collection i,
.tp-dashboard-wrapper .tp-saved-collections button[name="tp_delete_collection"] i,
.tp-dashboard-wrapper .tp-saved-collections button[value="delete_collection"] i,
.tp-dashboard-wrapper .tp-saved-collection-card .tp-collection-delete i,
.tp-dashboard-wrapper .tp-saved-collection-card .tp-delete-collection i,
.tp-dashboard-wrapper .tp-saved-collection-card .delete-collection i,
.tp-dashboard-wrapper .tp-saved-collection-card button[name="tp_delete_collection"] i,
.tp-dashboard-wrapper .tp-saved-collection-card button[value="delete_collection"] i,
.tp-dashboard-wrapper .tp-collection-card .tp-collection-delete i,
.tp-dashboard-wrapper .tp-collection-card .tp-delete-collection i,
.tp-dashboard-wrapper .tp-collection-card .delete-collection i,
.tp-dashboard-wrapper .tp-collection-card button[name="tp_delete_collection"] i,
.tp-dashboard-wrapper .tp-collection-card button[value="delete_collection"] i,
.tp-dashboard-wrapper .tp-saved-spots-collections .tp-collection-delete i,
.tp-dashboard-wrapper .tp-saved-spots-collections .tp-delete-collection i,
.tp-dashboard-wrapper .tp-saved-spots-collections .delete-collection i,
.tp-dashboard-wrapper .tp-saved-spots-collections button[name="tp_delete_collection"] i,
.tp-dashboard-wrapper .tp-saved-spots-collections button[value="delete_collection"] i,
.tp-dashboard-wrapper .tp-saved-collections-form button[name="tp_delete_collection"] i,
.tp-dashboard-wrapper .tp-saved-collections-form button[value="delete_collection"] i {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: currentColor !important;
font-size: 15px !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
.tp-dashboard-wrapper .tp-saved-collections .tp-collection-delete:hover,
.tp-dashboard-wrapper .tp-saved-collections .tp-delete-collection:hover,
.tp-dashboard-wrapper .tp-saved-collections .delete-collection:hover,
.tp-dashboard-wrapper .tp-saved-collections button[name="tp_delete_collection"]:hover,
.tp-dashboard-wrapper .tp-saved-collections button[value="delete_collection"]:hover,
.tp-dashboard-wrapper .tp-saved-collection-card .tp-collection-delete:hover,
.tp-dashboard-wrapper .tp-saved-collection-card .tp-delete-collection:hover,
.tp-dashboard-wrapper .tp-saved-collection-card .delete-collection:hover,
.tp-dashboard-wrapper .tp-saved-collection-card button[name="tp_delete_collection"]:hover,
.tp-dashboard-wrapper .tp-saved-collection-card button[value="delete_collection"]:hover,
.tp-dashboard-wrapper .tp-collection-card .tp-collection-delete:hover,
.tp-dashboard-wrapper .tp-collection-card .tp-delete-collection:hover,
.tp-dashboard-wrapper .tp-collection-card .delete-collection:hover,
.tp-dashboard-wrapper .tp-collection-card button[name="tp_delete_collection"]:hover,
.tp-dashboard-wrapper .tp-collection-card button[value="delete_collection"]:hover,
.tp-dashboard-wrapper .tp-saved-spots-collections .tp-collection-delete:hover,
.tp-dashboard-wrapper .tp-saved-spots-collections .tp-delete-collection:hover,
.tp-dashboard-wrapper .tp-saved-spots-collections .delete-collection:hover,
.tp-dashboard-wrapper .tp-saved-spots-collections button[name="tp_delete_collection"]:hover,
.tp-dashboard-wrapper .tp-saved-spots-collections button[value="delete_collection"]:hover,
.tp-dashboard-wrapper .tp-saved-collections-form button[name="tp_delete_collection"]:hover,
.tp-dashboard-wrapper .tp-saved-collections-form button[value="delete_collection"]:hover {
background: #fee4dc !important;
border-color: rgba(211, 47, 47, 0.26) !important;
color: #b42318 !important;
transform: translateY(-1px) !important;
box-shadow: 0 10px 20px rgba(180, 35, 24, 0.10) !important;
} .tp-dashboard-wrapper .tp-saved-collections .tp-collection-actions,
.tp-dashboard-wrapper .tp-saved-collection-card .tp-collection-actions,
.tp-dashboard-wrapper .tp-collection-card .tp-collection-actions,
.tp-dashboard-wrapper .tp-saved-spots-collections .tp-collection-actions {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-wrap: wrap !important;
} @supports selector(:has(*)) {
.tp-dashboard-wrapper .tp-widget-box:has(button[name="tp_delete_collection"]) button[name="tp_delete_collection"],
.tp-dashboard-wrapper .tp-widget-box:has(button[value="delete_collection"]) button[value="delete_collection"] {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 42px !important;
border-radius: 12px !important;
border: 1px solid rgba(211, 47, 47, 0.14) !important;
background: #fff7f3 !important;
color: #d32f2f !important;
font-size: 0 !important;
line-height: 1 !important;
box-shadow: none !important;
cursor: pointer !important;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}
.tp-dashboard-wrapper .tp-widget-box:has(button[name="tp_delete_collection"]) button[name="tp_delete_collection"] i,
.tp-dashboard-wrapper .tp-widget-box:has(button[value="delete_collection"]) button[value="delete_collection"] i {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: currentColor !important;
font-size: 15px !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
.tp-dashboard-wrapper .tp-widget-box:has(button[name="tp_delete_collection"]) button[name="tp_delete_collection"]:hover,
.tp-dashboard-wrapper .tp-widget-box:has(button[value="delete_collection"]) button[value="delete_collection"]:hover {
background: #fee4dc !important;
border-color: rgba(211, 47, 47, 0.26) !important;
color: #b42318 !important;
transform: translateY(-1px) !important;
box-shadow: 0 10px 20px rgba(180, 35, 24, 0.10) !important;
}
} .tp-primary-career-badge {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid transparent;
}
.tp-primary-career-badge--vanlife {
background: #eef6ff;
border-color: #d6e9ff;
color: #2563a7;
}
.tp-primary-career-badge--camping {
background: #eff8ef;
border-color: #d6ead6;
color: #397343;
}
.tp-primary-career-badge--biker {
background: #fff4e8;
border-color: #ffe0b8;
color: #bd6800;
}
.tp-primary-career-badge--contributor {
background: #f6f0ff;
border-color: #e5d8fa;
color: #7650a8;
}
.tp-dashboard-careers {
margin-bottom: 24px;
padding: 26px;
border: 1px solid var(--border-color);
border-radius: 16px;
background: #fff;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.02);
}
.tp-dashboard-careers-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
margin-bottom: 20px;
}
.tp-dashboard-careers-kicker {
display: block;
margin-bottom: 5px;
color: var(--mustard);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tp-dashboard-careers-header h2 {
margin: 0;
color: var(--charcoal);
font-size: 1.42rem;
line-height: 1.2;
font-weight: 800;
letter-spacing: -0.02em;
}
.tp-dashboard-careers-header p {
margin: 6px 0 0;
color: var(--muted);
font-size: 0.88rem;
line-height: 1.5;
}
.tp-dashboard-total-xp {
min-width: 112px;
padding: 12px 16px;
border-radius: 14px;
background: #fffaf0;
text-align: right;
}
.tp-dashboard-total-xp strong,
.tp-dashboard-total-xp span {
display: block;
}
.tp-dashboard-total-xp strong {
color: var(--charcoal);
font-size: 1.34rem;
line-height: 1;
font-weight: 900;
}
.tp-dashboard-total-xp span {
margin-top: 5px;
color: #9a6b00;
font-size: 0.72rem;
font-weight: 800;
}
.tp-dashboard-career-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.tp-dashboard-career-card {
--career-accent: #8057b2;
--career-soft: #f6f0ff;
min-width: 0;
padding: 18px;
border: 1px solid var(--border-color);
border-radius: 14px;
background: #fbfcfd;
}
.tp-dashboard-career-card.is-primary {
box-shadow: inset 0 0 0 1px rgba(255, 184, 0, 0.32);
}
.tp-dashboard-career-card--vanlife {
--career-accent: #3b82c4;
--career-soft: #eef6ff;
}
.tp-dashboard-career-card--camping {
--career-accent: #4d8a55;
--career-soft: #eff8ef;
}
.tp-dashboard-career-card--biker {
--career-accent: #e28717;
--career-soft: #fff4e8;
}
.tp-dashboard-career-card--contributor {
--career-accent: #8057b2;
--career-soft: #f6f0ff;
}
.tp-dashboard-career-top {
display: flex;
align-items: center;
gap: 12px;
}
.tp-dashboard-career-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: var(--career-soft);
color: var(--career-accent);
font-size: 1.05rem;
}
.tp-dashboard-career-title {
min-width: 0;
flex: 1;
}
.tp-dashboard-career-title span,
.tp-dashboard-career-title strong {
display: block;
}
.tp-dashboard-career-title span {
color: var(--muted);
font-size: 0.74rem;
font-weight: 750;
}
.tp-dashboard-career-title strong {
margin-top: 2px;
color: var(--charcoal);
font-size: 1rem;
line-height: 1.2;
font-weight: 850;
}
.tp-dashboard-primary-label {
flex: 0 0 auto;
padding: 5px 8px;
border-radius: 999px;
background: #fff7dd;
color: #9a6b00;
font-size: 0.66rem;
line-height: 1;
font-weight: 900;
text-transform: uppercase;
}
.tp-dashboard-career-progress {
margin-top: 16px;
}
.tp-dashboard-career-progress-track {
height: 7px;
overflow: hidden;
border-radius: 999px;
background: #e9edf1;
}
.tp-dashboard-career-progress-track span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--career-accent);
}
.tp-dashboard-career-progress-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 8px;
}
.tp-dashboard-career-progress-meta strong {
color: var(--charcoal);
font-size: 0.75rem;
font-weight: 850;
}
.tp-dashboard-career-progress-meta span {
color: var(--soft-muted);
font-size: 0.7rem;
text-align: right;
}
@media (max-width: 760px) {
.tp-dashboard-careers {
padding: 20px;
}
.tp-dashboard-careers-header {
flex-direction: column;
}
.tp-dashboard-total-xp {
width: 100%;
text-align: left;
}
.tp-dashboard-career-grid {
grid-template-columns: 1fr;
}
} .tp-dash-main-card {
padding-top: 22px;
padding-bottom: 22px;
}
.tp-dashboard-profile-score {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
}
.tp-dashboard-profile-score-main,
.tp-dashboard-profile-rank {
min-height: 64px;
padding: 11px 16px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
border-radius: 14px;
}
.tp-dashboard-profile-score-main {
background: #fff8e7;
}
.tp-dashboard-profile-score-main strong {
color: var(--charcoal);
font-size: 1.35rem;
line-height: 1;
font-weight: 900;
}
.tp-dashboard-profile-score-main span {
margin-top: 5px;
color: #9a6b00;
font-size: 0.7rem;
font-weight: 800;
}
.tp-dashboard-profile-rank {
min-width: 98px;
border: 1px solid var(--border-color);
background: #fafbfc;
color: var(--muted) !important;
font-size: 0.72rem;
font-weight: 800;
text-decoration: none !important;
transition: 0.2s ease;
}
.tp-dashboard-profile-rank span {
color: var(--charcoal);
font-size: 1.05rem;
line-height: 1;
font-weight: 900;
}
.tp-dashboard-profile-rank i {
margin-bottom: 5px;
color: var(--mustard);
font-size: 1rem;
}
.tp-dashboard-profile-rank:hover {
border-color: var(--mustard);
background: #fffaf0;
color: #9a6b00 !important;
}
.tp-dashboard-careers-header {
margin-bottom: 18px;
}
.tp-dashboard-careers-header > div:first-child {
max-width: 720px;
}
.tp-dashboard-career-grid:empty {
display: none;
}
.tp-dashboard-career-grid {
min-height: 0;
}
@media (max-width: 1100px) {
.tp-dashboard-profile-score {
width: 100%;
margin-left: 0;
}
.tp-dashboard-profile-score-main,
.tp-dashboard-profile-rank {
flex: 1;
align-items: flex-start;
}
}
@media (max-width: 620px) {
.tp-dashboard-profile-score {
flex-direction: column;
align-items: stretch;
}
.tp-dashboard-profile-score-main,
.tp-dashboard-profile-rank {
width: 100%;
min-height: 56px;
}
}