@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --forest: #1B4332; --pine: #2D6A4F; --mint: #40916C; --sage: #74C69D;
  --frost: #D8F3DC; --snow: #F8FAF9; --charcoal: #1A1F1C; --stone: #4A5550;
  --mist: #8FA49A; --border: #D4E4DD; --gold: #C8A84B; --danger: #C0392B;
  --white: #FFFFFF; --shadow: 0 2px 12px rgba(27,67,50,0.08);
  --shadow-md: 0 4px 24px rgba(27,67,50,0.12); --radius: 10px; --radius-lg: 16px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',sans-serif; background:var(--snow); color:var(--charcoal); min-height:100vh; line-height:1.6; }

.app-container { min-height:100vh; display:flex; flex-direction:column; }

header { background:#0F2A4A; color:white; padding:0 2rem; position:sticky; top:0; z-index:100; box-shadow:0 2px 20px rgba(0,0,0,0.2); }
.header-inner { max-width:1100px; margin:0 auto; height:68px; display:flex; align-items:center; justify-content:space-between; }

.logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:white; }
.logo-img { height:38px; width:auto; background:white; border-radius:6px; padding:3px 8px; }
.logo-forum-label { font-family:'DM Sans',sans-serif; font-size:0.7rem; font-weight:400; letter-spacing:0.14em; text-transform:uppercase; opacity:0.65; color:white; border-left:1px solid rgba(255,255,255,0.3); padding-left:12px; }

nav { display:flex; align-items:center; gap:0.5rem; }
nav a { color:rgba(255,255,255,0.75); text-decoration:none; font-size:0.9rem; padding:0.4rem 0.8rem; border-radius:6px; transition:all 0.2s; font-weight:400; }
nav a:hover, nav a.active { color:white; background:rgba(255,255,255,0.12); }
.nav-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:600; color:white; cursor:pointer; border:2px solid rgba(255,255,255,0.3); transition:border-color 0.2s; }
.nav-avatar:hover { border-color:var(--gold); }

main { flex:1; max-width:1100px; margin:0 auto; padding:2rem; width:100%; }

.card { background:white; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; transition:transform 0.2s, box-shadow 0.2s; }
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.card-body { padding:1.5rem; }

.destinations-header { margin-bottom:2rem; }
.destinations-header h1 { font-family:'Playfair Display',serif; font-size:2rem; color:var(--forest); margin-bottom:0.4rem; }
.destinations-header p { color:var(--stone); font-size:0.95rem; }

.destinations-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.destination-card { cursor:pointer; text-decoration:none; color:inherit; display:block; }
.destination-card-img { height:160px; background:linear-gradient(135deg,var(--pine),var(--mint)); display:flex; align-items:center; justify-content:center; font-size:3rem; position:relative; overflow:hidden; }
.destination-card-img img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.destination-card-country { position:absolute; top:10px; right:10px; background:rgba(255,255,255,0.92); color:var(--forest); font-size:0.72rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:3px 10px; border-radius:20px; }
.destination-card .card-body h3 { font-family:'Playfair Display',serif; font-size:1.2rem; color:var(--forest); margin-bottom:0.4rem; }
.destination-card .card-body p { font-size:0.87rem; color:var(--stone); margin-bottom:0.8rem; line-height:1.5; }
.destination-meta { display:flex; align-items:center; gap:1rem; font-size:0.8rem; color:var(--mist); }

.destination-header { background:linear-gradient(135deg,var(--forest) 0%,var(--pine) 100%); color:white; border-radius:var(--radius-lg); padding:2rem; margin-bottom:1.5rem; position:relative; overflow:hidden; }
.destination-header h1 { font-family:'Playfair Display',serif; font-size:1.8rem; margin-bottom:0.3rem; }
.destination-header p { opacity:0.8; font-size:0.9rem; }

.breadcrumb { display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; margin-bottom:1.5rem; color:var(--stone); }
.breadcrumb a { color:var(--mint); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }

.threads-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.threads-toolbar h2 { font-size:1rem; font-weight:600; color:var(--stone); }

.thread-item { background:white; border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem 1.5rem; margin-bottom:0.75rem; cursor:pointer; transition:all 0.2s; display:flex; gap:1rem; align-items:flex-start; text-decoration:none; color:inherit; }
.thread-item:hover { border-color:var(--mint); box-shadow:var(--shadow); transform:translateX(3px); }
.thread-item.pinned { border-left:3px solid var(--gold); }
.thread-avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:700; color:white; flex-shrink:0; }
.thread-content { flex:1; min-width:0; }
.thread-title { font-weight:600; font-size:1rem; color:var(--forest); margin-bottom:0.3rem; display:flex; align-items:center; gap:0.5rem; }
.pin-badge { font-size:0.7rem; background:var(--gold); color:white; padding:2px 8px; border-radius:20px; font-weight:500; }
.thread-preview { font-size:0.85rem; color:var(--stone); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thread-meta { font-size:0.78rem; color:var(--mist); margin-top:0.4rem; display:flex; gap:1rem; }

.thread-post { background:white; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; margin-bottom:1.5rem; }
.post-header { display:flex; align-items:center; gap:0.8rem; margin-bottom:1rem; }
.post-author { font-weight:600; color:var(--forest); font-size:0.95rem; }
.post-date { font-size:0.8rem; color:var(--mist); }
.post-body { font-size:0.95rem; line-height:1.7; color:var(--charcoal); }
.post-image { margin-top:1rem; border-radius:var(--radius); max-width:100%; max-height:400px; object-fit:cover; }

.comments-section { margin-top:1.5rem; }
.comments-section h3 { font-size:0.9rem; font-weight:600; color:var(--stone); margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:1px solid var(--border); }
.comment-item { display:flex; gap:0.8rem; padding:1rem 0; border-bottom:1px solid var(--frost); }
.comment-item:last-child { border-bottom:none; }
.comment-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; color:white; flex-shrink:0; }
.comment-content { flex:1; }
.comment-author { font-weight:600; font-size:0.85rem; color:var(--forest); }
.comment-date { font-size:0.75rem; color:var(--mist); margin-left:0.5rem; }
.comment-body { font-size:0.9rem; color:var(--charcoal); margin-top:0.3rem; line-height:1.6; }
.comment-image { margin-top:0.5rem; border-radius:8px; max-width:300px; max-height:200px; object-fit:cover; }

.form-card { background:white; border-radius:var(--radius-lg); padding:2rem; border:1px solid var(--border); box-shadow:var(--shadow); }
.form-group { margin-bottom:1.2rem; }
label { display:block; font-size:0.85rem; font-weight:600; color:var(--stone); margin-bottom:0.4rem; }
input[type="text"],input[type="email"],input[type="password"],textarea,select { width:100%; padding:0.65rem 0.9rem; border:1.5px solid var(--border); border-radius:var(--radius); font-family:'DM Sans',sans-serif; font-size:0.9rem; color:var(--charcoal); background:var(--snow); transition:border-color 0.2s, box-shadow 0.2s; outline:none; }
input:focus,textarea:focus,select:focus { border-color:var(--mint); box-shadow:0 0 0 3px rgba(64,145,108,0.12); background:white; }
textarea { resize:vertical; min-height:100px; }

.btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.65rem 1.4rem; border-radius:var(--radius); font-family:'DM Sans',sans-serif; font-size:0.9rem; font-weight:600; cursor:pointer; border:none; transition:all 0.2s; text-decoration:none; }
.btn-primary { background:var(--pine); color:white; }
.btn-primary:hover { background:var(--forest); transform:translateY(-1px); }
.btn-secondary { background:var(--frost); color:var(--pine); border:1.5px solid var(--border); }
.btn-secondary:hover { background:var(--border); }
.btn-gold { background:var(--gold); color:white; }
.btn-gold:hover { background:#b8942e; }
.btn-sm { padding:0.4rem 0.9rem; font-size:0.82rem; }
.btn-danger { background:#fee2e2; color:var(--danger); }
.btn-danger:hover { background:var(--danger); color:white; }

.file-upload { display:flex; align-items:center; gap:0.8rem; }
.file-upload-label { display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; background:var(--frost); border:1.5px dashed var(--sage); border-radius:var(--radius); cursor:pointer; font-size:0.85rem; color:var(--pine); font-weight:500; transition:all 0.2s; }
.file-upload-label:hover { background:white; border-color:var(--mint); }
input[type="file"] { display:none; }
.preview-img { max-height:80px; border-radius:6px; display:none; }

.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--forest) 0%,var(--pine) 50%,var(--mint) 100%); padding:2rem; }
.auth-box { background:white; border-radius:var(--radius-lg); padding:2.5rem; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,0.15); }
.auth-logo { text-align:center; margin-bottom:2rem; }
.auth-logo p { color:var(--stone); font-size:0.85rem; margin-top:0.3rem; }
.auth-footer { text-align:center; margin-top:1.5rem; font-size:0.85rem; color:var(--mist); }
.auth-footer a { color:var(--mint); text-decoration:none; }
.auth-footer a:hover { text-decoration:underline; }

.alert { padding:0.8rem 1rem; border-radius:var(--radius); font-size:0.875rem; margin-bottom:1rem; }
.alert-error { background:#fee2e2; color:var(--danger); border:1px solid #fecaca; }
.alert-success { background:var(--frost); color:var(--pine); border:1px solid var(--sage); }

.trips-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.trip-card { background:white; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.2rem; box-shadow:var(--shadow); }
.trip-card h3 { font-family:'Playfair Display',serif; color:var(--forest); margin-bottom:0.5rem; }
.trip-dates { font-size:0.82rem; color:var(--stone); margin-bottom:0.8rem; display:flex; gap:1rem; }
.participant-item { display:flex; align-items:center; gap:0.6rem; padding:0.4rem 0; font-size:0.88rem; color:var(--stone); }
.participant-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; color:white; flex-shrink:0; }

.admin-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; margin-bottom:2rem; }
.stat-card { background:white; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.2rem; text-align:center; }
.stat-number { font-size:2rem; font-weight:700; color:var(--pine); line-height:1; }
.stat-label { font-size:0.8rem; color:var(--mist); margin-top:0.3rem; }

.empty-state { text-align:center; padding:3rem; color:var(--mist); }
.empty-state .icon { font-size:3rem; margin-bottom:1rem; }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:200; display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; pointer-events:none; transition:opacity 0.2s; }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal { background:white; border-radius:var(--radius-lg); padding:2rem; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; transform:translateY(20px); transition:transform 0.2s; }
.modal-overlay.open .modal { transform:translateY(0); }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.modal-header h2 { font-family:'Playfair Display',serif; color:var(--forest); font-size:1.3rem; }
.modal-close { background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--mist); padding:0.2rem; line-height:1; }
.modal-close:hover { color:var(--charcoal); }

.spinner { width:24px; height:24px; border:3px solid var(--frost); border-top-color:var(--mint); border-radius:50%; animation:spin 0.8s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-center { display:flex; justify-content:center; align-items:center; padding:3rem; }

.categories-list { display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:white; box-shadow:var(--shadow); }
.category-row { display:flex; align-items:center; gap:1.2rem; padding:1.2rem 1.5rem; text-decoration:none; color:inherit; border-bottom:1px solid var(--frost); transition:background 0.15s; }
.category-row:last-child { border-bottom:none; }
.category-row:hover { background:var(--snow); }
.category-icon { font-size:1.8rem; width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--frost); border-radius:12px; flex-shrink:0; }
.category-info { flex:1; min-width:0; }
.category-name { font-weight:700; font-size:1rem; color:var(--forest); margin-bottom:0.2rem; }
.category-desc { font-size:0.83rem; color:var(--stone); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.category-stats { text-align:right; flex-shrink:0; }
.category-stat { font-size:1.1rem; font-weight:700; color:var(--pine); line-height:1; }
.category-stat span { display:block; font-size:0.72rem; font-weight:400; color:var(--mist); }
.category-last { font-size:0.75rem; color:var(--mist); margin-top:0.3rem; }

.travel-category-section { margin-bottom:2.5rem; }
.travel-category-heading { display:flex; align-items:center; gap:0.6rem; font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--forest); margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:2px solid var(--frost); }
.destinations-grid.compact { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.compact-card .card-body { padding:1rem; }
.compact-card .card-body h3 { font-size:1rem; margin-bottom:0.3rem; }
.compact-card .card-body p { font-size:0.8rem; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:0.5rem; }
.compact-img { height:110px !important; font-size:2.2rem !important; }

.read-only-notice { background:var(--frost); border:1px solid var(--sage); border-radius:var(--radius); padding:0.8rem 1rem; font-size:0.85rem; color:var(--pine); text-align:center; margin-bottom:1rem; }
.read-only-notice a { color:var(--forest); font-weight:600; }

@media (max-width:640px) {
  header { padding:0 1rem; }
  main { padding:1rem; }
  .destinations-grid { grid-template-columns:1fr; }
  .auth-box { padding:1.5rem; }
  .destination-header { padding:1.5rem; }
}