/* ============================================================
   NOMADS DASHBOARD — Complete Redesign
   Layout: Split-screen login | Sidebar + Content dashboard
   Font:   Inter
   Colors: #1D5B78 (blu scuro Profile) · #19222D (grigio scuro) · #2C3E50
   ============================================================ */

/* ==================== TOKENS ==================== */
:root {
    --bp-lg: 1024px;
    --bp-md: 768px;
    --bp-sm: 640px;
    --bp-xs: 480px;
    --touch-min: 44px;
    --modal-safe-bottom: env(safe-area-inset-bottom, 0px);
    --modal-safe-top: env(safe-area-inset-top, 0px);
    --c-primary: #1D5B78;
    --c-primary-hover: #245F7D;
    --c-accent: #8EBFC8;
    --c-accent-soft: #7BAAB6;
    --c-gradient-a: #2C5F6B;
    --c-gradient-b: #7BAAB6;
    --c-text: #2C3E50;

    --bg-0: #0B1117;
    --bg-1: #111820;
    --bg-2: #19222D;
    --bg-3: rgba(255,255,255,0.04);
    --bg-hover: rgba(255,255,255,0.06);
    --bg-input: rgba(0,0,0,0.22);

    --t1: #E4E8EC;
    --t2: rgba(228,232,236,0.6);
    --t3: rgba(228,232,236,0.35);

    --border: rgba(255,255,255,0.07);
    --border-h: rgba(255,255,255,0.14);

    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;

    --green: #34D399;
    --red: #F87171;
    --yellow: #FBBF24;
}

/* ==================== RESET ==================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; }
body {
    height:100%;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--bg-0);
    color: var(--t1);
    overflow-x: hidden;
    font-size: 14px;
    line-height: 1.5;
}
/* Kill legacy */
.cursor-dot,.cursor-outline,#particles-js,.gradient-orb,.orb-1,.orb-2,.orb-3{display:none!important}

/* ==================== INITIAL LOADER ==================== */
.initial-loader {
    position: fixed; inset:0;
    display: flex; align-items:center; justify-content:center;
    background: var(--bg-0);
    z-index: 9999;
}
.loader-ring, .loader {
    width: 36px; height: 36px;
    border: 2.5px solid var(--border);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   LOGIN — SPLIT SCREEN
   Left: dark brand panel with gradient
   Right: form on near-black
   ============================================================ */
.login-screen {
    min-height: 100vh;
    display: flex;
}

/* Left brand panel */
.login-brand {
    flex: 0 0 42%;
    background: linear-gradient(160deg, var(--c-gradient-a), var(--c-primary) 60%, var(--bg-1));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}
.login-brand::before {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29,91,120,0.15) 0%, transparent 70%);
    top: -100px; right: -120px;
    pointer-events: none;
}
.login-brand-inner {
    text-align: center;
    position: relative;
    z-index: 1;
}
.login-brand-logo {
    width: 72px; height: 72px;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    filter: brightness(1.1);
}
.login-brand-title {
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: white;
    margin-bottom: 0.5rem;
}
.login-brand-tagline {
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255,255,255,0.55);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Right form panel */
.login-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: var(--bg-0);
}
.login-card {
    width: 100%;
    max-width: 380px;
}
.login-heading {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 0.3rem;
}
.login-subheading {
    font-size: 0.85rem;
    color: var(--t3);
    margin-bottom: 2rem;
}

/* Form fields */
.login-form { margin-bottom: 1rem; }
.field { margin-bottom: 1.15rem; }
.field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--t2);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.field-input {
    position: relative;
    display: flex;
    align-items: center;
}
.field-icon {
    position: absolute;
    left: 0.85rem;
    font-size: 1.15rem;
    color: var(--t3);
    pointer-events: none;
    transition: color .2s;
}
.field-action {
    position: absolute;
    right: 0.85rem;
    font-size: 1.15rem;
    color: var(--t3);
    cursor: pointer;
    transition: color .2s;
}
.field-action:hover { color: var(--c-primary); }
.field-input input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 2.65rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--t1);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color .2s;
}
.field-input input:focus {
    outline: none;
    border-color: var(--c-primary);
}
.field-input input::placeholder { color: var(--t3); }
.field-input:focus-within .field-icon { color: var(--c-primary); }

/* legacy compat */
.input-group { position: relative; margin-bottom: 1.15rem; }
.input-icon {
    position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
    color: var(--t3); font-size: 1.15rem; z-index: 2;
}
.toggle-password {
    position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%);
    color: var(--t3); cursor: pointer; font-size: 1.15rem; z-index: 2;
}
.toggle-password:hover { color: var(--c-primary); }
.input-group input {
    width: 100%; padding: 0.75rem 2.5rem;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--r-md); color: var(--t1); font-size: 0.9rem; font-family: inherit;
}
.input-group input:focus { outline: none; border-color: var(--c-primary); }
.input-group input::placeholder { color: var(--t3); }

/* Divider */
.login-divider {
    display: flex; align-items: center;
    gap: 1rem; margin: 1.25rem 0;
}
.login-divider::before, .login-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}
.login-divider span {
    font-size: 0.7rem; color: var(--t3);
    text-transform: uppercase; letter-spacing: 1px;
}
/* legacy divider */
.divider { text-align: center; margin: 1.25rem 0; position: relative; }
.divider::before, .divider::after {
    content: ''; position: absolute; top: 50%; width: 42%; height: 1px; background: var(--border);
}
.divider::before { left: 0; } .divider::after { right: 0; }
.divider span { padding: 0 .75rem; color: var(--t3); font-size: .7rem; position: relative; text-transform: uppercase; letter-spacing: 1px; }

.error-message { color: var(--red); font-size: .8rem; text-align: center; margin-top: .75rem; min-height: 18px; }

.login-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.login-back {
    display: flex; align-items: center; gap: 0.3rem;
    color: var(--t3); text-decoration: none; font-size: 0.8rem;
    transition: color .2s;
}
.login-back:hover { color: var(--c-primary); }
.login-back .material-icons { font-size: 1rem; }
.login-lang { display: flex; align-items: center; }

/* legacy login compat */
.login-section { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; background:var(--bg-0); }
.login-title { text-align:center; margin-bottom:1.5rem; }
.login-title .gradient-text { display:block; font-size:.85rem; color:var(--c-primary); -webkit-text-fill-color:var(--c-primary); background:none; -webkit-background-clip:unset; }
.login-title .brand-text { display:block; font-size:2rem; font-weight:800; color:var(--t1); -webkit-text-fill-color:var(--t1); background:none; -webkit-background-clip:unset; text-shadow:none; }
.login-title .subtitle { display:block; font-size:.75rem; color:var(--t3); letter-spacing:2px; text-transform:uppercase; }
.login-logo { text-align:center; margin-bottom:1.5rem; }
.login-logo img { width:56px; height:56px; }
.login-language { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.login-language .material-icons { color:var(--t3); font-size:1rem; }
.btn-back { display:flex; align-items:center; justify-content:center; gap:.3rem; margin-top:1.5rem; color:var(--t3); text-decoration:none; font-size:.8rem; transition:color .2s; }
.btn-back:hover { color:var(--c-primary); }

/* ==================== BUTTONS (shared) ==================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border-radius: var(--r-md);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all .18s ease;
    line-height: 1.4;
}
.btn .material-icons, .btn i { font-size: 1.1rem; }

.btn--primary {
    background: var(--c-primary);
    color: white;
}
.btn--primary:hover {
    background: var(--c-primary-hover);
    box-shadow: 0 4px 16px rgba(29,91,120,0.3);
}

.btn--outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--t1);
}
.btn--outline:hover {
    border-color: var(--border-h);
    background: var(--bg-hover);
}

.btn--success { background: var(--green); color: #0a1a12; }
.btn--success:hover { filter: brightness(1.1); }
.btn--danger { background: var(--red); color: white; }
.btn--danger:hover { filter: brightness(1.1); }
.btn--full { width: 100%; }

.btn--google { gap: 0.6rem; }

.btn-icon-only {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--t3);
    cursor: pointer;
    transition: all .18s;
    padding: 0;
}
.btn-icon-only:hover {
    border-color: var(--border-h);
    color: var(--t1);
    background: var(--bg-hover);
}
.btn-icon-only.active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: white;
}
.btn-icon-only .material-icons { font-size: 1.1rem; }

.btn-clear {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    background: transparent; border: none;
    border-radius: 50%;
    color: var(--t3); cursor: pointer;
    transition: all .18s;
    padding: 0;
}
.btn-clear:hover { color: var(--red); background: rgba(248,113,113,0.1); }
.btn-clear .material-icons { font-size: 16px; }

/* legacy btn compat */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.6rem 1.2rem; border-radius:var(--r-md); font-size:.85rem; font-weight:600; font-family:inherit; cursor:pointer; border:none; background:var(--c-primary); color:white; transition:all .18s; width:100%; }
.btn-primary:hover { background:var(--c-primary-hover); box-shadow:0 4px 16px rgba(29,91,120,.3); }
.btn-secondary { display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1.2rem; border-radius:var(--r-md); font-size:.85rem; font-weight:600; font-family:inherit; cursor:pointer; background:transparent; border:1px solid var(--border); color:var(--t1); transition:all .18s; }
.btn-secondary:hover { border-color:var(--border-h); background:var(--bg-hover); }
.btn-success { display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1.2rem; border-radius:var(--r-md); font-size:.85rem; font-weight:600; font-family:inherit; cursor:pointer; border:none; background:var(--green); color:#0a1a12; transition:all .18s; }
.btn-danger { display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1.2rem; border-radius:var(--r-md); font-size:.85rem; font-weight:600; font-family:inherit; cursor:pointer; border:none; background:var(--red); color:white; transition:all .18s; }
.btn-google { display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%; padding:.6rem 1.2rem; background:transparent; border:1px solid var(--border); border-radius:var(--r-md); color:var(--t1); font-size:.85rem; font-weight:500; font-family:inherit; cursor:pointer; transition:all .18s; }
.btn-google:hover { border-color:var(--border-h); background:var(--bg-hover); }
button:disabled { opacity:.35; cursor:not-allowed; }

/* Selects */
.select--mini {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--t1);
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .18s;
}
.select--mini:hover { border-color: var(--border-h); }
.select--mini:focus { outline: none; border-color: var(--c-primary); }
.select--mini option { background: var(--bg-2); color: var(--t1); }
/* legacy lang selectors */
.lang-selector { background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--t1); padding:.35rem .6rem; font-size:.75rem; font-family:inherit; cursor:pointer; }
.lang-selector option { background:var(--bg-2); color:var(--t1); }
.lang-selector-compact { background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--t1); padding:.35rem .6rem; font-size:.75rem; font-weight:600; font-family:inherit; cursor:pointer; min-width:50px; position:relative; }
.lang-selector-compact::before { content:'🌐'; position:absolute; left:6px; top:50%; transform:translateY(-50%); font-size:11px; pointer-events:none; }
.lang-selector-compact { padding-left:1.5rem; }
.lang-selector-compact option { background:var(--bg-2); color:var(--t1); }

/* ============================================================
   DASHBOARD LAYOUT
   ┌────────────────────────────────────────────────────────────┐
   │ TOPBAR                                                    │
   ├──────────────┬─────────────────────────────────────────────┤
   │  SIDEBAR     │  CONTENT                                   │
   │  (filters,   │  (tabs, card grid, map)                    │
   │   actions)   │                                            │
   │              │                                            │
   └──────────────┴─────────────────────────────────────────────┘
   ============================================================ */

.dash {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-0);
}
/* legacy compat */
.dashboard-section { min-height:100vh; background:var(--bg-0); }

/* ==================== TOPBAR ==================== */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    height: 56px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; }
.topbar-brand {
    display: flex; align-items: center; gap: 0.6rem;
    text-decoration: none;
}
.topbar-brand img { width: 28px; height: 28px; opacity: .85; }
.topbar-brand span {
    font-size: 1rem; font-weight: 700;
    color: var(--t1); letter-spacing: 0.5px;
}

.topbar-right {
    display: flex; align-items: center; gap: 0.75rem;
}
.topbar-user {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.3rem 0.7rem 0.3rem 0.3rem;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 32px;
}
.avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--border);
}
.topbar-user-info { display: flex; flex-direction: column; }
.avatar-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--t1);
    direction: ltr;
    unicode-bidi: isolate;
}
.badge {
    font-size: 0.55rem; font-weight: 700;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}
.badge { background: rgba(255,255,255,0.06); color: var(--t3); }

/* legacy compat navbar */
.dashboard-navbar { display:none; }
.user-status { font-size:.55rem; padding:.05rem .35rem; border-radius:4px; display:inline-block; max-width:fit-content; letter-spacing:.5px; text-transform:uppercase; font-weight:700; }
.user-status.free { background:rgba(255,255,255,.06); color:var(--t3); }
.user-status.premium { background:rgba(29,91,120,.15); color:var(--c-primary); }

/* ==================== DASHBOARD BODY ==================== */
.dash-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* ==================== SIDEBAR ==================== */
.dash-sidebar {
    width: 280px;
    flex-shrink: 0;
    align-self: stretch;
    background: transparent;
    border-right: 1px solid var(--border-h);
    padding: 1.5rem 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sidebar-section { /* container */ }

/* Sidebar: content fixed at top, no vertical centering (stays put when main content changes) */
.dash-sidebar {
    justify-content: flex-start;
}

.sidebar-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 1rem 0;
}
.sidebar-hero-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 0;
}
.sidebar-hero-title,
.dash .post-title {
    direction: ltr;
    unicode-bidi: isolate;
}

.sidebar-hero-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--t1);
    text-align: center;
    line-height: 1.35;
    margin: 0;
    letter-spacing: 0.3px;
}
.sidebar-hero-actions {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Sidebar action buttons — redesigned with distinct visual identity */
.btn-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 96px;
    height: 96px;
    padding: 0;
    border-radius: 16px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.75rem;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    position: relative;
}
.btn-hero-icon {
    font-size: 1.75rem !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-hero:hover .btn-hero-icon {
    transform: scale(1.08);
}
.btn-hero-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}
/* Add Tip — primary: blu scuro Profile & Direct Chat */
.btn-hero--primary {
    background: linear-gradient(145deg, var(--c-primary) 0%, var(--c-primary-hover) 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(29, 91, 120, 0.35);
}
.btn-hero--primary .btn-hero-icon {
    background: rgba(0, 0, 0, 0.15);
}
.btn-hero--primary:hover {
    background: linear-gradient(145deg, var(--c-primary-hover) 0%, var(--c-primary) 100%);
    color: white;
    box-shadow: 0 6px 24px rgba(29, 91, 120, 0.45);
    transform: translateY(-2px);
}
.btn-hero--primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 12px rgba(29, 91, 120, 0.25);
}
/* Add Event — outline: grigio scuro con bordo */
.btn-hero--outline {
    background: var(--bg-2);
    color: var(--t1);
    border: 1px solid var(--border-h);
}
.btn-hero--outline .btn-hero-icon {
    background: rgba(255, 255, 255, 0.06);
}
.btn-hero--outline:hover {
    background: var(--bg-3);
    border-color: var(--c-primary);
    color: var(--t1);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.btn-hero--outline:active {
    transform: translateY(0);
}

/* Filters in sidebar — no container, only vertical line separator */
.filter-location {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0;
    background: transparent;
    border: none;
    transition: none;
}
.filter-location:focus-within { border-color: transparent; }
.filter-location .material-icons { font-size: 1.1rem; color: var(--t3); }
.filter-location-input {
    border: none; background: transparent;
    color: var(--t1); font-size: 0.82rem; font-family: inherit;
    flex: 1; min-width: 0; outline: none;
}
.filter-location-input::placeholder { color: var(--t3); }

.filter-location--compact {
    padding: 0.5rem 0;
}
.filter-location--compact .location-display {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--t1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-results {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    max-height: 220px;
    overflow-y: auto;
    margin-top: 0.4rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.location-result-item {
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}
.location-result-item:last-child { border-bottom: none; }
.location-result-item:hover { background: var(--bg-hover); }
.location-result-main { font-size: .82rem; font-weight: 600; color: var(--t1); margin-bottom: 1px; }
.location-result-secondary { font-size: .72rem; color: var(--t3); }

.filter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.6rem;
}

/* Sidebar when city selected: no container backgrounds, only vertical line */
.sidebar-location .select--mini {
    background: transparent;
    border: none;
    padding: 0.25rem 0;
}
.filter-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

/* ==================== CATEGORY BAR — Premium dark gray, rounded ==================== */
.category-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem;
    background: #1a1f26;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03);
}

.category-bar-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.category-bar-label .material-icons {
    font-size: 1.05rem;
    opacity: 0.7;
}

.category-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.category-scroll {
    flex: 1;
    min-width: 0;
}

.category-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

.category-filter-btn {
    padding: 0.65rem 1rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--t2);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}
.category-filter-btn .material-icons {
    font-size: 1.15rem;
    opacity: 0.9;
}
.category-filter-btn:hover {
    border-color: rgba(255,255,255,0.15);
    color: var(--t1);
    background: rgba(255,255,255,0.08);
}
.category-filter-btn.active {
    border-color: var(--c-primary);
    background: rgba(29,91,120,0.25);
    color: var(--t1);
}
.category-filter-btn.active .material-icons {
    opacity: 1;
}

/* Subcategories — separate section, clearer hierarchy */
.subcat-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.subcat-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.subcat-label .material-icons { font-size: 0.85rem; opacity: 0.65; }

/* Subcategorie: 2 righe, seconda riga centrata (stesso spazio sx e dx) */
.subcat-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.subcategory-filter-btn {
    flex: 0 0 calc((100% - 4.5rem) / 10);
    min-width: 0;
    padding: 0.45rem 0.6rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--t2);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
.subcategory-filter-btn .material-icons { font-size: 0.85rem; opacity: 0.85; }
.subcategory-filter-btn:hover {
    border-color: rgba(255,255,255,0.15);
    color: var(--t1);
    background: rgba(255,255,255,0.08);
}
.subcategory-filter-btn.food-active,
.subcategory-filter-btn.tourism-active,
.subcategory-filter-btn.sports-active {
    border-color: var(--c-primary);
    background: rgba(29,91,120,0.2);
    color: var(--t1);
}

.btn-clear-cat, .btn-clear-filter {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: var(--t3);
    cursor: pointer;
    transition: all .2s;
    padding: 0;
}
.btn-clear-cat:hover, .btn-clear-filter:hover {
    color: var(--t1);
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
}
.btn-clear-cat .material-icons, .btn-clear-filter .material-icons { font-size: 1.15rem; }

@media (max-width: 640px) {
    .category-pills {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* legacy compat */
.cat-grid, .category-filters-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.subcat-grid, .subcategory-filters-grid { display: flex !important; flex-wrap: wrap; gap: 0.35rem; }
.category-filters-container { }
.category-filters-header { display: none; }

/* legacy search/location compat */
.location-filter { position:relative; display:flex; align-items:center; gap:.4rem; padding:.55rem .75rem; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-md); transition:border-color .18s; width:100%; max-width:none; margin:0; }
.location-filter::after { display:none; }
.location-filter:focus-within { border-color:var(--c-primary); }
.location-filter .material-icons { font-size:1.1rem; color:var(--t3); }
.location-input { border:none; background:transparent; color:var(--t1); font-size:.82rem; font-family:inherit; flex:1; min-width:0; outline:none; text-align:left; padding:0; }
.location-input::placeholder { color:var(--t3); }
.btn-clear-location { background:transparent; border:none; width:22px; height:22px; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; color:var(--t3); border-radius:50%; }
.btn-clear-location:hover { color:var(--red); }
.btn-clear-location .material-icons { font-size:16px; }

.search-field { position:relative; display:flex; align-items:center; gap:.4rem; padding:.55rem .75rem; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-md); transition:border-color .18s; flex:none; max-width:none; margin:0; }
.search-field::after { display:none; }
.search-field:focus-within { border-color:var(--c-primary); }
.search-field .material-icons { font-size:1.1rem; color:var(--t3); }
.search-input { border:none; background:transparent; color:var(--t1); font-size:.82rem; font-family:inherit; flex:1; min-width:0; outline:none; text-align:left; padding:0; }
.search-input::placeholder { color:var(--t3); }
.empty-search-message { grid-column:1/-1; text-align:center; padding:3rem 1.5rem; color:var(--t3); font-size:.82rem; border:1px dashed var(--border); border-radius:var(--r-md); }

/* legacy toolbar/radius compat */
.posts-toolbar { display:none; }
.radius-selector { display:flex; align-items:center; gap:.4rem; padding:.35rem .6rem; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-sm); margin-top:.6rem; }
.radius-selector .material-icons { font-size:.9rem; color:var(--c-primary); }
.radius-select { background:transparent; border:none; color:var(--t1); font-size:.75rem; font-weight:600; font-family:inherit; cursor:pointer; outline:none; }
.radius-select option { background:var(--bg-2); color:var(--t1); }

/* ==================== CONTENT AREA ==================== */
.dash-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 1.5rem 2rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.dash-content > .posts-area {
    flex: 1;
    min-height: 0;
}

/* ==================== CITY SELECT HERO (centered, full height) ==================== */
.city-select-hero {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 56px);
    padding: 3rem 2rem;
}
.city-select-hero-inner {
    width: 100%;
    max-width: 520px;
    text-align: center;
    position: relative;
}
.city-select-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}
.city-select-subtitle {
    font-size: 0.9rem;
    color: var(--t3);
    margin-bottom: 2rem;
}
.city-select-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--bg-input);
    border: 2px solid var(--border);
    border-radius: var(--r-lg);
    transition: border-color .2s;
}
.city-select-input-wrap:focus-within {
    border-color: var(--c-primary);
}
.city-select-input-wrap .material-icons {
    font-size: 1.5rem;
    color: var(--c-primary);
}
.city-select-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--t1);
    font-size: 1.1rem;
    font-family: inherit;
    outline: none;
}
.city-select-input::placeholder {
    color: var(--t3);
}
.location-results--hero {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    max-height: 280px;
    text-align: left;
    z-index: 100;
}
/* legacy compat */
.dashboard-main { max-width:none; margin:0; padding:1.5rem 2rem; }
.dashboard-header { display:none; }

/* Upgrade banner */
.upgrade-banner {
    display: none;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg-3);
    margin-bottom: 1.5rem;
}
.upgrade-banner.active { display: block; }
.upgrade-inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.upgrade-icon { font-size: 2rem; color: var(--c-primary); flex-shrink: 0; }
.upgrade-title { font-size: 1rem; font-weight: 700; color: var(--t1); margin-bottom: 0.25rem; }
.upgrade-desc { font-size: 0.82rem; color: var(--t3); line-height: 1.5; }
/* legacy upgrade compat */
.upgrade-section { display:none; padding:2rem; width:100%; }
.upgrade-section.active { display:flex; }
.upgrade-card { text-align:center; max-width:420px; width:100%; margin:0 auto; padding:2rem; }

/* ==================== CONTENT TYPE CHOICE (Tips vs Events - big centered buttons) ==================== */
.content-type-choice {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 3rem 2rem;
    flex-shrink: 0;
}
.content-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 140px;
    height: 140px;
    padding: 0;
    border: 2px solid var(--border-h);
    border-radius: 20px;
    background: var(--bg-2);
    color: var(--t2);
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
}
.content-type-btn:hover {
    border-color: var(--c-primary);
    color: var(--c-accent);
    background: rgba(29, 91, 120, 0.12);
    transform: scale(1.03);
}
.content-type-btn-icon {
    font-size: 2.5rem !important;
    opacity: 0.9;
}
.content-type-btn-label {
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ==================== TABS + TOOLBAR ==================== */
.content-toolbar {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.content-toolbar--sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-0);
    padding-top: 0.25rem;
    margin-top: -0.25rem;
}
.toolbar-right {
    position: absolute;
    right: 0;
    display: flex;
    gap: 4px;
    padding-bottom: 0.5rem;
}

.tabs {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
}
.tab {
    padding: 0.85rem 1.5rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--t3);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}
.tab:hover {
    color: var(--t2);
    border-color: var(--border-h);
    background: rgba(255,255,255,0.06);
}
.tab.active {
    color: var(--t1);
    border-color: var(--border-h);
    background: rgba(255,255,255,0.1);
}
.tab .material-icons { font-size: 1.25rem; }
.tab.active .material-icons { color: var(--t1); }
.tab-count { display: none; }

/* legacy tabs compat */
.posts-tabs { display:flex; gap:0; margin-bottom:1.25rem; position:relative; border-bottom:1px solid var(--border); }
.posts-tabs::after { display:none; }
.tab-btn { padding:.6rem 1rem .75rem; background:none; border:none; border-bottom:2px solid transparent; color:var(--t3); font-size:.82rem; font-weight:600; font-family:inherit; cursor:pointer; display:flex; align-items:center; gap:.4rem; transition:color .18s, border-color .18s; margin-bottom:-1px; }
.tab-btn.active { color:var(--t1); border-bottom-color:var(--border-h); }
.tab-btn.active .material-icons { color:var(--t1); }
.tab-btn:hover:not(.active) { color:var(--t2); }
.tab-btn .material-icons { font-size:1rem; }

/* ==================== CARD GRID ==================== */
.card-grid, .posts-grid {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.card-grid.active, .posts-grid.active {
    display: grid;
}

/* ==================== POST CARD ==================== */
.post-card {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.post-card:hover {
    border-color: var(--border-h);
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.post-card--interactive:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}
.post-card--interactive .post-actions {
    position: relative;
    z-index: 2;
}

.post-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--bg-2);
    display: block;
}
.post-image.lazy-image { opacity:.3; filter:blur(4px); }
.post-image.lazy-image[src] { opacity:1; filter:none; transition:opacity .3s, filter .3s; }
.post-card:hover .post-image { transform: scale(1.02); transition: transform .3s; }

.post-content {
    padding: 1rem 1.1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--t1);
    background-clip: unset;
}

.post-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}
.post-meta-line,
.post-meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--t2);
    overflow: hidden;
}
.post-meta-line .post-meta-text,
.post-meta-item .post-meta-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-meta-line .material-icons,
.post-meta-item .material-icons {
    font-size: 0.9rem;
    color: var(--c-primary);
    flex-shrink: 0;
}

.post-description {
    color: var(--t3);
    font-size: 0.78rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.post-actions {
    display: flex;
    gap: 0.4rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border);
    margin-top: auto;
}
.btn-icon {
    flex: 1;
    padding: 0.45rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--t3);
    transition: all .18s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-icon .material-icons { font-size: 1rem; }
.btn-icon:hover { border-color: var(--border-h); color: var(--t1); background: var(--bg-hover); }
.btn-icon.danger:hover { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); color: var(--red); }

/* Card animations */
.card-grid .post-card, .posts-grid .post-card {
    animation: cardIn .35s ease both;
}
.card-grid .post-card:nth-child(1), .posts-grid .post-card:nth-child(1) { animation-delay:.02s; }
.card-grid .post-card:nth-child(2), .posts-grid .post-card:nth-child(2) { animation-delay:.04s; }
.card-grid .post-card:nth-child(3), .posts-grid .post-card:nth-child(3) { animation-delay:.06s; }
.card-grid .post-card:nth-child(4), .posts-grid .post-card:nth-child(4) { animation-delay:.08s; }
.card-grid .post-card:nth-child(5), .posts-grid .post-card:nth-child(5) { animation-delay:.10s; }
.card-grid .post-card:nth-child(6), .posts-grid .post-card:nth-child(6) { animation-delay:.12s; }
@keyframes cardIn {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Mapbox popup */
.mapbox-popup-custom { padding:0; max-width:360px!important; }
.mapbox-popup-custom .mapboxgl-popup-content { padding:0; background:transparent; border-radius:0; box-shadow:none; }
.map-popup-card-wrapper { max-width:360px; }
.map-popup-card-wrapper .post-card { cursor:default; }
.map-popup-card-wrapper .post-title { color:#1a1a1a!important; -webkit-text-fill-color:#1a1a1a!important; }
.map-popup-card-wrapper .post-meta-line,
.map-popup-card-wrapper .post-meta-item { color:#555!important; }
.map-popup-card-wrapper .post-description { color:#444!important; }
.map-popup-card-wrapper .post-meta-line .material-icons,
.map-popup-card-wrapper .post-meta-item .material-icons { color:var(--c-primary)!important; }

/* ==================== MAP VIEW ==================== */
.map-wrap, .map-view-container {
    width: 100%;
    height: calc(100vh - 200px);
    min-height: 500px;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--border);
}
.map-canvas, .posts-map { width:100%; height:100%; }
.map-post-marker {
    width:26px; height:26px;
    background:var(--c-primary);
    border-radius:50%;
    border:2px solid white;
    box-shadow:0 2px 6px rgba(0,0,0,.3);
    cursor:pointer;
    transition:transform .15s;
}
.map-post-marker:hover { transform:scale(1.15); }
.map-controls { position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:6px; z-index:1000; }
.btn-map-control { display:flex; align-items:center; gap:.4rem; padding:.5rem .8rem; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--t1); font-family:inherit; font-size:.75rem; font-weight:500; cursor:pointer; transition:all .18s; }
.btn-map-control:hover { border-color:var(--border-h); }
.btn-map-control .material-icons { font-size:1rem; }

/* ==================== EMPTY & LOADING ==================== */
.empty, .empty-state { text-align:center; padding:4rem 2rem; }
.empty .material-icons, .empty-state .material-icons { font-size:2.5rem; color:var(--t3); margin-bottom:1rem; display:block; }
.empty h3, .empty-state h3 { font-size:1rem; font-weight:600; color:var(--t1); margin-bottom:0.3rem; }
.empty p, .empty-state p { font-size:.82rem; color:var(--t3); max-width:280px; margin:0 auto; }

/* Posts area: centrare empty state in altezza quando non ci sono post */
.posts-area {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px - 3rem);
}
.posts-area .content-toolbar,
.posts-area .category-bar-wrap { flex-shrink: 0; }
/* Quando empty state: nascondi grid/category/map/pagination e centra empty state */
/* MA: se città selezionata (has-location), mantieni category-bar visibile per permettere scelta categoria */
.posts-area.has-empty-state .card-grid,
.posts-area.has-empty-state .map-wrap,
.posts-area.has-empty-state .pagination {
    display: none !important;
}
.posts-area.has-empty-state:not(.has-location) .category-bar-wrap {
    display: none !important;
}
.posts-area.has-empty-state.has-location:not(.has-chosen-content-type) .category-bar-wrap {
    display: none !important;
}
.posts-area.has-empty-state.has-location.has-chosen-content-type .category-bar-wrap {
    display: flex !important;
    grid-row: 2;
}
.posts-area.has-empty-state {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: calc(100vh - 56px - 3rem);
}
.posts-area.has-empty-state.has-location:not(.has-chosen-content-type) {
    grid-template-rows: 1fr;
}
.posts-area.has-empty-state.has-location.has-chosen-content-type {
    grid-template-rows: auto auto 1fr;
}
.posts-area.has-empty-state .content-toolbar {
    grid-row: 1;
}
.posts-area.has-empty-state.has-location.has-chosen-content-type .content-toolbar {
    grid-row: 1;
}
.posts-area.has-empty-state.has-location:not(.has-chosen-content-type) .content-toolbar {
    display: none !important;
}
.posts-area.has-empty-state.has-location:not(.has-chosen-content-type) #contentTypeChoice {
    display: flex !important;
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: center;
    justify-self: center;
}
.posts-area.has-empty-state.has-location:not(.has-chosen-content-type) #emptyState {
    display: none !important;
}

/* Quando ha città ma non ha scelto Tips/Events (es. dopo click X): mostra solo i 2 bottoni centrati */
.posts-area.has-location:not(.has-chosen-content-type) {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 56px - 3rem);
}
.posts-area.has-location:not(.has-chosen-content-type) .content-toolbar,
.posts-area.has-location:not(.has-chosen-content-type) .category-bar-wrap,
.posts-area.has-location:not(.has-chosen-content-type) .card-grid,
.posts-area.has-location:not(.has-chosen-content-type) .map-wrap,
.posts-area.has-location:not(.has-chosen-content-type) .pagination,
.posts-area.has-location:not(.has-chosen-content-type) #emptyState,
.posts-area.has-location:not(.has-chosen-content-type) .loading {
    display: none !important;
}
.posts-area.has-location:not(.has-chosen-content-type) #contentTypeChoice {
    display: flex !important;
}
.posts-area.has-empty-state #emptyState {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}
.posts-area.has-empty-state.has-location.has-chosen-content-type #emptyState {
    grid-row: 3;
}

.loading, .loading-state { text-align:center; padding:4rem 2rem; }
.loading .loader, .loading-state .loader { margin:0 auto 1.5rem; }
.loading p, .loading-state p { color:var(--t2); font-size:.82rem; }

.pagination, .posts-pagination { display:flex; justify-content:center; margin:2rem 0 1rem; }
.posts-pagination .label-loading { display:none; }
.posts-pagination .btn-secondary.is-loading .label-default { display:none; }
.posts-pagination .btn-secondary.is-loading .label-loading { display:inline; }

/* ==================== MODALS ==================== */
.modal {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    z-index:10000;
    align-items:center; justify-content:center;
    padding:1.5rem;
    pointer-events:none;
    overflow:hidden;
}
.modal.active { display:flex; pointer-events:auto; }

.modal-content {
    background:var(--bg-1);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    max-width:700px;
    width:100%;
    max-height:90vh;
    overflow-y:auto;
    box-shadow:0 24px 64px rgba(0,0,0,.5);
    animation:modalIn .25s ease;
    pointer-events:auto;
    position:relative;
    z-index:10001;
}
.modal-content.large { max-width:860px; }
.modal-content.small { max-width:420px; }
.modal-large { max-width:760px; max-height:88vh; display:flex; flex-direction:column; }
.modal-large .modal-body { flex:1; overflow-y:auto; padding:1.25rem 1.5rem; min-height:200px; }
@keyframes modalIn {
    from { opacity:0; transform:translateY(10px) scale(.98); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

.modal-header {
    padding:1.25rem 1.5rem;
    border-bottom:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.modal-title {
    font-size:1.1rem; font-weight:700; color:var(--t1);
    display:flex; align-items:center; gap:.4rem;
}
.modal-close {
    background:transparent;
    border:1px solid var(--border);
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--t3);
    transition:all .18s;
}
.modal-close:hover { color:var(--red); border-color:rgba(248,113,113,.3); background:rgba(248,113,113,.06); }
.modal-close .material-icons { font-size:1.1rem; }

.modal-body { padding:1.5rem; }
.modal-footer {
    padding:1rem 1.5rem;
    border-top:1px solid var(--border);
    display:flex;
    gap:.6rem;
    justify-content:flex-end;
}
.modal-footer button { flex:1; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.modal-buttons { display:flex; gap:.6rem; justify-content:space-between; margin-top:1.25rem; }

/* Modal Steps */
.modal-step { display:none; padding:1.5rem; }
.modal-step.active { display:block; }
/* Premium modal compat: steps visible */
.modal-large .modal-step { display:block; visibility:visible; opacity:1; }
.modal-large .modal-step * { visibility:visible; }

/* Progress bar */
.modal-progress { padding:1rem 1.5rem; border-bottom:1px solid var(--border); background:rgba(0,0,0,.08); }
.progress-bar { width:100%; height:2px; background:var(--border); border-radius:1px; overflow:hidden; margin-bottom:1rem; }
.progress-fill { height:100%; background:var(--c-primary); border-radius:1px; transition:width .4s ease; }
.progress-steps { display:flex; justify-content:space-between; align-items:center; }
.step-indicator { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; position:relative; }
.step-indicator::after { content:''; position:absolute; top:12px; left:50%; width:100%; height:1px; background:var(--border); z-index:-1; }
.step-indicator:last-child::after { display:none; }
.step-number { width:24px; height:24px; border-radius:50%; background:var(--bg-3); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--t3); font-weight:700; font-size:.65rem; transition:all .18s; }
.step-indicator.active .step-number { background:var(--c-primary); border-color:var(--c-primary); color:white; }
.step-indicator.completed .step-number { background:var(--c-primary); border-color:var(--c-primary); color:white; }
.step-label { font-size:.6rem; color:var(--t3); font-weight:500; text-align:center; }
.step-indicator.active .step-label { color:var(--t1); font-weight:600; }
.step-indicator.completed .step-label { color:var(--c-primary); }

.step-header { text-align:center; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
.step-icon { width:48px; height:48px; margin:0 auto .75rem; background:var(--c-primary); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.step-icon i { font-size:24px; color:white; }
.step-title { font-size:1.1rem; font-weight:700; color:var(--t1); margin-bottom:.2rem; }
.step-subtitle { font-size:.78rem; color:var(--t3); }

/* ==================== FORM STYLES ==================== */
.form-group { margin-bottom:1rem; }
.form-group label {
    display:block; font-size:.72rem; font-weight:600;
    color:var(--c-primary); margin-bottom:.3rem;
    text-transform:uppercase; letter-spacing:.3px;
}
.form-label {
    display:flex; align-items:center; gap:.4rem;
    margin-bottom:.4rem; color:var(--c-primary);
    font-weight:600; font-size:.72rem;
    text-transform:uppercase; letter-spacing:.3px;
}
.form-input {
    width:100%; padding:.6rem .85rem;
    background:var(--bg-input);
    border:1px solid var(--border);
    border-radius:var(--r-md);
    color:var(--t1);
    font-size:.85rem; font-family:inherit;
    transition:border-color .18s;
}
.form-input:focus { outline:none; border-color:var(--c-primary); }
.form-input::placeholder { color:var(--t3); }
.form-input option, select.form-input { background:var(--bg-2); color:var(--t1); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
textarea.form-input { resize:vertical; min-height:90px; font-family:inherit; }
.form-hint { margin-top:.3rem; font-size:.68rem; color:var(--t3); font-style:italic; }

/* Image previews */
.image-preview-container, .images-preview-container {
    min-height:160px;
    border:2px dashed var(--border);
    border-radius:var(--r-lg);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; background:var(--bg-input);
    transition:border-color .18s;
}
.image-preview-container:hover, .images-preview-container:hover { border-color:var(--c-primary); }
.empty-image-placeholder, .empty-images-placeholder { text-align:center; padding:2rem; cursor:pointer; width:100%; }
.empty-image-placeholder i, .empty-images-placeholder i { font-size:2.5rem; color:var(--c-primary); margin-bottom:.5rem; display:block; }
.empty-image-placeholder p, .empty-images-placeholder p { color:var(--t3); font-size:.82rem; }
.image-preview-item { position:relative; width:100%; height:100%; min-height:160px; border-radius:var(--r-lg); overflow:hidden; }
.image-preview-item img, .image-preview-item video { width:100%; height:100%; object-fit:cover; border-radius:var(--r-lg); }
.image-preview-item.video-item { position:relative; }
.video-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:3rem; color:white; pointer-events:none; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.remove-image-btn, .edit-image-btn { position:absolute; top:8px; background:rgba(0,0,0,.7); border:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .18s; z-index:10; opacity:0; }
.image-preview-item:hover .remove-image-btn, .image-preview-item:hover .edit-image-btn { opacity:1; }
.remove-image-btn { right:8px; } .edit-image-btn { right:44px; }
.remove-image-btn:hover { background:var(--red); } .edit-image-btn:hover { background:var(--c-primary); }
.remove-image-btn i, .edit-image-btn i { color:white; font-size:.95rem; }
.images-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.5rem; padding:.5rem; }
.images-grid .image-preview-item { min-height:120px; aspect-ratio:1; }
.add-more-btn { border:2px dashed var(--border); border-radius:var(--r-md); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:all .18s; min-height:120px; background:transparent; }
.add-more-btn:hover { border-color:var(--c-primary); background:var(--bg-3); }
.add-more-btn i { font-size:1.3rem; color:var(--c-primary); margin-bottom:.2rem; }
.add-more-btn p { color:var(--t3); font-size:.72rem; }

/* Media upload */
.media-upload-container { margin:1.25rem 0; }
.media-upload-dropzone { min-height:150px; border:2px dashed var(--border); border-radius:var(--r-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem; cursor:pointer; transition:all .18s; background:var(--bg-input); }
.media-upload-dropzone::before { display:none; }
.media-upload-dropzone:hover { border-color:var(--c-primary); }
.media-upload-dropzone.dragover { border-color:var(--c-primary); background:rgba(29,91,120,.04); }
.media-upload-icon { font-size:2.5rem; color:var(--c-primary); margin-bottom:.75rem; }
.media-upload-text { color:var(--t2); font-size:.85rem; font-weight:600; margin-bottom:.2rem; text-align:center; }
.media-upload-subtext { color:var(--t3); font-size:.72rem; text-align:center; }
.media-upload-limit { margin-top:.5rem; padding:.25rem .6rem; background:rgba(29,91,120,.12); border-radius:var(--r-sm); color:var(--c-primary); font-size:.68rem; font-weight:600; }
.media-preview-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.5rem; margin-top:.75rem; }
.media-preview-item { position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:1; background:rgba(0,0,0,.2); }
.media-preview-image, .media-preview-video { width:100%; height:100%; position:relative; }
.media-preview-image img, .media-preview-video img { width:100%; height:100%; object-fit:cover; }
.media-preview-video-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:2rem; color:white; text-shadow:0 2px 4px rgba(0,0,0,.4); pointer-events:none; }
.media-preview-overlay { position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; transition:opacity .18s; display:flex; align-items:center; justify-content:center; }
.media-preview-item:hover .media-preview-overlay { opacity:1; }
.media-preview-remove { background:var(--red); border:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:white; transition:transform .18s; }
.media-preview-remove:hover { transform:scale(1.1); }

/* Upload progress */
#uploadProgressOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(6px); z-index:10002; align-items:center; justify-content:center; }
.upload-progress-content { background:var(--bg-1); border:1px solid var(--border); border-radius:var(--r-xl); padding:2.5rem; text-align:center; max-width:320px; box-shadow:0 24px 64px rgba(0,0,0,.5); }
.upload-progress-spinner { width:36px; height:36px; border:2.5px solid var(--border); border-top-color:var(--c-primary); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto 1.25rem; }
.upload-progress-message { color:var(--t1); font-size:.9rem; font-weight:600; margin-bottom:1rem; }
.upload-progress-bar { width:100%; height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.upload-progress-fill { height:100%; background:var(--c-primary); border-radius:2px; transition:width .3s ease; }

/* Form sections */
.form-section { margin:1.25rem 0; padding:1rem; background:var(--bg-3); border:1px solid var(--border); border-radius:var(--r-lg); }
.form-section:hover { border-color:var(--border-h); }
.form-section-title { color:var(--t1); font-size:.9rem; font-weight:700; margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem; }
.form-section-icon { width:30px; height:30px; background:var(--c-primary); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:white; font-size:.9rem; }
.collapsible-section { margin:.75rem 0; }
.collapsible-header { display:flex; align-items:center; justify-content:space-between; padding:.65rem .85rem; background:var(--bg-3); border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer; transition:all .18s; color:var(--t1); }
.collapsible-header:hover { border-color:var(--border-h); }
.collapsible-header.active { background:var(--c-primary); border-color:var(--c-primary); color:white; }
.collapsible-title { font-size:.82rem; font-weight:600; display:flex; align-items:center; gap:.4rem; }
.collapsible-icon { font-size:1.1rem; transition:transform .2s; }
.collapsible-header.active .collapsible-icon { transform:rotate(180deg); }
.collapsible-content { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.collapsible-content.active { max-height:2000px; }
.collapsible-body { padding:.75rem; border:1px solid var(--border); border-top:none; border-radius:0 0 var(--r-md) var(--r-md); background:var(--bg-input); }
.option-group { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.35rem; margin:.75rem 0; }
.option-item { position:relative; }
.option-input { position:absolute; opacity:0; pointer-events:none; }
.option-label { display:flex; align-items:center; gap:.5rem; padding:.55rem .75rem; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; transition:all .18s; color:var(--t1); font-weight:500; font-size:.78rem; }
.option-label:hover { border-color:var(--border-h); }
.option-input:checked + .option-label { background:var(--c-primary); border-color:var(--c-primary); color:white; }
.option-checkbox { width:18px; height:18px; border:2px solid currentColor; border-radius:3px; display:flex; align-items:center; justify-content:center; }
.option-input:checked + .option-label .option-checkbox { background:white; color:var(--c-primary); }
.option-checkbox i { font-size:12px; opacity:0; transform:scale(0); transition:all .2s; }
.option-input:checked + .option-label .option-checkbox i { opacity:1; transform:scale(1); }
.datetime-group { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }

/* Mapbox integration */
.mapbox-container { width:100%; height:240px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); margin:.75rem 0; }
.mapbox-container .mapboxgl-map, .mapbox-container .mapboxgl-canvas-container { border-radius:var(--r-lg); }
.custom-marker { cursor:pointer; }
.mapbox-search-container { margin:.75rem 0; position:relative; z-index:100; }
.mapbox-search-input { width:100%; padding:.65rem 2rem .65rem .85rem; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-md); color:var(--t1); font-size:.85rem; font-family:inherit; transition:border-color .18s; }
.mapbox-search-input:focus { outline:none; border-color:var(--c-primary); }
.mapbox-search-icon { position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--t3); font-size:1.1rem; }
/* Legacy JS modals toggle .mapbox-results via inline display — do not hide React picker */
.mapbox-search-container .mapbox-results { display:none; margin-top:.3rem; max-height:240px; overflow-y:auto; position:absolute; left:0; right:0; z-index:1000; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.mapbox-result-item { padding:.65rem .75rem; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s; display:flex; align-items:center; gap:.6rem; }
.mapbox-result-item:last-child { border-bottom:none; }
.mapbox-result-item:hover { background:var(--bg-hover); }
.mapbox-result-icon { width:28px; height:28px; background:var(--c-primary); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:.85rem; flex-shrink:0; }
.mapbox-result-content { flex:1; min-width:0; }
.mapbox-result-title { color:var(--t1); font-weight:600; font-size:.78rem; margin-bottom:1px; }
.mapbox-result-subtitle { color:var(--t3); font-size:.68rem; }

/* ==================== NOTIFICATIONS ==================== */
.notification {
    position:fixed; top:20px; right:20px;
    padding:.75rem 1.2rem;
    border-radius:var(--r-md);
    display:flex; align-items:center; gap:.6rem;
    z-index:10001;
    transform:translateX(380px);
    opacity:0;
    transition:all .25s ease;
    min-width:240px;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.notification.show { transform:translateX(0); opacity:1; }
.notification.success { background:rgba(52,211,153,.95); color:#0a1a12; }
.notification.error { background:rgba(248,113,113,.95); color:white; }
.notification i { font-size:1.3rem; }
.notification span { font-weight:600; font-size:.82rem; color:inherit; }

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.15); }

/* ==================== ANIMATIONS ==================== */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes rotating { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.rotating { animation:rotating .8s linear infinite; }
.hidden { display:none!important; }
.fade-in { animation:fadeIn .3s ease; }
.modal-content.force-visible { animation:none!important; opacity:1!important; visibility:visible!important; display:block!important; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
    .dash-sidebar { width: 240px; padding: 1.25rem 1rem; }
    .dash-content { padding: 1.25rem 1.5rem; }
}

@media (max-width: 768px) {
    /* Login: stack vertically */
    .login-screen { flex-direction: column; }
    .login-brand {
        flex: 0 0 auto;
        padding: 2.5rem 2rem 2rem;
        min-height: auto;
    }
    .login-brand-title { font-size: 2rem; }
    .login-panel { padding: 2rem 1.5rem; }

    /* Dashboard: sidebar becomes top bar */
    .dash-body { flex-direction: column; }
    .dash-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: none;
        padding: 1rem;
        flex-direction: row;
        flex-wrap: wrap;
        gap: .75rem;
        overflow-y: visible;
        justify-content: center;
    }
    .sidebar-section { flex: 1; min-width: 200px; }
    .sidebar-hero { min-height: auto; padding: 0.75rem 0; }
    .sidebar-hero-inner { gap: 1rem; }
    .sidebar-hero-actions { flex-direction: row; width: 100%; justify-content: center; gap: 0.6rem; }
    .btn-hero { width: 80px; height: 80px; }
    .btn-hero-icon { width: 34px; height: 34px; font-size: 1.4rem !important; }
    .content-type-choice { flex-direction: column; gap: 1rem; padding: 2rem 1rem; }
    .content-type-btn { width: 120px; height: 120px; }
    .content-type-btn-icon { font-size: 2rem !important; }
    .cat-grid, .category-filters-grid { grid-template-columns: repeat(2, 1fr); }

    .dash-content { padding: 1rem; }

    .topbar-user-info { display: none; }

    .card-grid, .posts-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .datetime-group { grid-template-columns: 1fr; }

    .modal { padding: .5rem; }
    .modal-content { border-radius: var(--r-lg); }
    .modal-header, .modal-body, .modal-footer { padding: 1rem; }
    .modal-footer { flex-direction: column; }
    .modal-large { max-width: 95%; }
}

@media (max-width: 480px) {
    .login-brand { padding: 2rem 1.5rem 1.5rem; }
    .login-brand-title { font-size: 1.6rem; }
    .login-card { max-width: 100%; }

    .dash-sidebar { padding: .75rem; gap: .5rem; }
    .sidebar-section { min-width: 100%; }
    .sidebar-hero-actions { flex-direction: row; justify-content: center; }
    
    .post-image { height: 150px; }
    .step-label { font-size: .55rem; }
    .step-number { width: 20px; height: 20px; font-size: .6rem; }
}

/* ==================== TIPS & EVENTS PREMIUM MODALS — Same layout ==================== */
#tipsPremiumModal .modal-content,
#eventsPremiumModal .modal-content {
    /* Inherits from .modal-large: 760px wide, 88vh tall */
}
#tipsPremiumModal .modal-body,
#eventsPremiumModal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}
.tips-premium-step { opacity: 1 !important; transform: none !important; visibility: visible !important; display: block !important; }
.tips-premium-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 0 0.5rem;
}
.tips-premium-header-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    background: var(--bg-2);
    border: 1px solid var(--border-h);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tips-premium-header-icon .material-icons { font-size: 1.5rem; color: var(--c-primary); }
.tips-premium-header h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 0.35rem;
    letter-spacing: -0.02em;
}
.tips-premium-header p {
    font-size: 0.9rem;
    color: var(--t3);
    margin: 0;
    line-height: 1.5;
}
.tips-premium-card {
    background: var(--bg-2);
    border: 1px solid var(--border-h);
    border-radius: var(--r-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.tips-premium-card:hover {
    border-color: rgba(29, 91, 120, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.tips-premium-card h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--t1);
}
.tips-premium-card h3 .material-icons { font-size: 1.1rem; color: var(--c-primary); }
.tips-premium-field { margin-bottom: 1.25rem; }
.tips-premium-field:last-child { margin-bottom: 0; }
.tips-premium-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--t1);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tips-premium-label .material-icons { font-size: 1rem; color: var(--c-primary); }
.tips-premium-input,
.tips-premium-textarea,
.tips-premium-select {
    width: 100%;
    padding: 0.65rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--t1);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
    outline: none;
}
.tips-premium-input:focus,
.tips-premium-textarea:focus,
.tips-premium-select:focus {
    border-color: var(--c-primary);
    background: rgba(29, 91, 120, 0.08);
}
.tips-premium-input::placeholder,
.tips-premium-textarea::placeholder { color: var(--t3); }
.tips-premium-input { height: 44px; }
.tips-premium-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}
.tips-premium-select { cursor: pointer; height: 44px; }
.tips-premium-select option { background: var(--bg-2); color: var(--t1); }
.tips-premium-input[readonly] {
    background: var(--bg-3);
    cursor: not-allowed;
    color: var(--t2);
}
.tips-premium-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
}
.tips-premium-category-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    border-radius: var(--r-md);
    border: 2px solid var(--border);
    background: var(--bg-3);
    color: var(--t1);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
.tips-premium-category-btn:hover {
    border-color: rgba(29, 91, 120, 0.5);
    background: rgba(29, 91, 120, 0.08);
    transform: translateY(-2px);
}
.tips-premium-category-btn .material-icons { font-size: 1.75rem; }
.tips-premium-subcat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.6rem;
}
.tips-premium-subcat-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    border-radius: var(--r-md);
    border: 2px solid var(--border);
    background: var(--bg-3);
    color: var(--t1);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
.tips-premium-subcat-btn:hover {
    border-color: rgba(29, 91, 120, 0.5);
    background: rgba(29, 91, 120, 0.08);
}
.tips-premium-subcat-btn .material-icons { font-size: 1.25rem; }
.tips-premium-dropzone {
    min-height: 160px;
    border: 2px dashed var(--border-h);
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-3);
    margin-bottom: 1rem;
}
.tips-premium-dropzone:hover,
.tips-premium-dropzone.dragover {
    border-color: var(--c-primary);
    background: rgba(29, 91, 120, 0.08);
}
.tips-premium-dropzone .material-icons { font-size: 2.5rem; color: var(--c-primary); margin-bottom: 0.5rem; }
.tips-premium-dropzone-title { font-size: 0.95rem; font-weight: 600; color: var(--t1); margin-bottom: 0.25rem; }
.tips-premium-dropzone-hint { font-size: 0.8rem; color: var(--t3); }
.tips-premium-media-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}
.tips-premium-media-slot {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-3);
    border: 2px dashed var(--border);
}
.tips-premium-media-slot.has-image {
    border-style: solid;
    border-color: var(--border-h);
}
.tips-premium-media-slot img { width: 100%; height: 100%; object-fit: cover; }
.tips-premium-media-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--red);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: transform 0.2s;
}
.tips-premium-media-remove:hover { transform: scale(1.1); }
.tips-premium-media-remove .material-icons { font-size: 16px; }
.tips-premium-required { color: var(--red); }
.tips-premium-address-search-status {
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: rgba(122, 185, 201, 0.9);
    pointer-events: none;
    white-space: nowrap;
}
.tips-premium-address-results {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    max-height: 280px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.tips-premium-address-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
    font-size: 0.85rem;
}
.tips-premium-address-item:last-child { border-bottom: none; }
.tips-premium-address-item:hover { background: var(--bg-hover); }
.tips-premium-address-main { font-weight: 600; color: var(--t1); }
.tips-premium-address-secondary { font-size: 0.75rem; color: var(--t3); margin-top: 2px; }
.tips-premium-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}
.tips-premium-switch-row:last-child { border-bottom: none; }
.tips-premium-switch-label { font-size: 0.85rem; color: var(--t1); }
.tips-premium-toggle {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}
.tips-premium-toggle.active {
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.tips-premium-toggle::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--t1);
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
}
.tips-premium-toggle.active::after { transform: translateX(20px); }
@media (max-width: 768px) {
    .tips-premium-category-grid { grid-template-columns: repeat(2, 1fr); }
    .tips-premium-media-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==================== DASHBOARD FORM MODAL (create / edit) ==================== */
.dashboard-form-modal {
    z-index: 10050;
}
.dashboard-form-modal__panel {
    max-width: 820px;
    border: 1px solid rgba(29, 91, 120, 0.35);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
}
.dashboard-form-modal__header {
    background: linear-gradient(180deg, rgba(29, 91, 120, 0.12), transparent);
}
.dashboard-form-modal__body {
    background: var(--bg-1);
}
.dashboard-form-modal__body .modal-step.active {
    animation: dashboardModalStepIn 0.22s ease;
}
@keyframes dashboardModalStepIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.dashboard-form-modal__footer {
    background: rgba(0, 0, 0, 0.12);
    flex-wrap: wrap;
}
.dashboard-form-modal__footer .btn--primary {
    min-width: 120px;
}
.dashboard-form-modal .step-header {
    margin-bottom: 1.25rem;
}
.dashboard-form-modal .option-label {
    min-height: 44px;
}
.dashboard-inline-add {
    margin-bottom: 1rem;
}

/* Mapbox address picker (Next.js tips/events modals) */
.dash-mapbox-picker {
    display: grid;
    gap: 0.65rem;
    position: relative;
}
.dash-mapbox-picker__hint {
    font-size: 0.85rem;
    color: var(--t3);
    margin: 0;
}
.dash-mapbox-picker__search {
    position: relative;
    z-index: 30;
}
.dash-mapbox-picker__search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--c-primary, #7ab9c9);
    pointer-events: none;
    z-index: 1;
}
.dash-mapbox-picker__input {
    width: 100%;
    padding: 0.7rem 0.85rem 0.7rem 2.5rem;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--t1);
    font-size: 0.88rem;
    font-family: inherit;
}
.dash-mapbox-picker__input:focus {
    outline: none;
    border-color: var(--c-primary);
}
.dash-mapbox-picker__search--loading .dash-mapbox-picker__input {
    padding-right: 7rem;
}
.dash-mapbox-picker__status {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.78rem;
    color: var(--c-primary);
    pointer-events: none;
}
.dash-mapbox-picker__results {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0.25rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 220px;
    overflow-y: auto;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    z-index: 10060;
}
.dash-mapbox-picker__result {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: left;
    padding: 0.65rem 0.7rem;
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--t1);
    font-size: 0.82rem;
    line-height: 1.35;
    cursor: pointer;
    font-family: inherit;
}
.dash-mapbox-picker__result .material-icons {
    font-size: 18px;
    color: var(--c-primary);
    flex-shrink: 0;
    margin-top: 1px;
}
.dash-mapbox-picker__result:hover {
    background: var(--bg-hover);
}
.dash-mapbox-picker__error {
    margin: 0;
    font-size: 0.8rem;
    color: #f59e8b;
}
.dash-mapbox-picker__map {
    width: 100%;
    height: 240px;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}
.dash-mapbox-picker__selected {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.82rem;
    color: var(--t2);
    line-height: 1.4;
}
.dash-mapbox-picker__selected .material-icons {
    font-size: 18px;
    color: var(--c-primary);
    flex-shrink: 0;
}

/* Premium form controls (aligned with Flutter insert tip/event) */
.dash-form-step {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.dash-form-step-header {
    text-align: center;
    margin-bottom: 0.35rem;
}
.dash-form-step-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 0.65rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(29, 91, 120, 0.35), rgba(29, 91, 120, 0.08));
    border: 1px solid rgba(29, 91, 120, 0.45);
    color: var(--accent, #5eb8d4);
}
.dash-form-step-icon .material-icons {
    font-size: 26px;
}
.dash-form-step-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-1, #f5f7fa);
}
.dash-form-step-subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    color: var(--text-3, #9aa5b1);
}
.dash-form-category-block {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.dash-form-field-label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.45rem;
}
.dash-form-field-label--center {
    text-align: center;
    align-items: center;
}
.dash-form-field-label__title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-2, #c5ced8);
}
.dash-form-field-label__hint {
    font-size: 0.78rem;
    color: var(--text-3, #9aa5b1);
}
.dash-form-subpanel {
    padding: 1rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(29, 91, 120, 0.28);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.dash-form-subpanel--sports {
    border-color: rgba(94, 184, 212, 0.35);
}
.dash-premium-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}
.dash-premium-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 96px;
    padding: 0.85rem 0.65rem;
    border-radius: 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-2, #c5ced8);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.dash-premium-card:hover {
    border-color: rgba(94, 184, 212, 0.45);
    background: rgba(29, 91, 120, 0.12);
}
.dash-premium-card--selected {
    border-color: var(--accent, #5eb8d4);
    background: linear-gradient(180deg, rgba(29, 91, 120, 0.28), rgba(29, 91, 120, 0.08));
    color: var(--text-1, #f5f7fa);
    box-shadow: 0 0 0 1px rgba(94, 184, 212, 0.25);
}
.dash-premium-card__icon {
    font-size: 28px;
    color: var(--accent, #5eb8d4);
}
.dash-premium-card__title {
    font-size: 0.9rem;
    font-weight: 700;
}
.dash-premium-card__subtitle {
    font-size: 0.72rem;
    color: var(--text-3, #9aa5b1);
    text-align: center;
    line-height: 1.25;
}
.dash-premium-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.dash-premium-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 72px;
    padding: 0.55rem 0.35rem;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-2, #c5ced8);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.dash-premium-cat .material-icons {
    font-size: 22px;
    color: var(--accent, #5eb8d4);
}
.dash-premium-cat:hover {
    border-color: rgba(94, 184, 212, 0.4);
}
.dash-premium-cat--selected {
    border-color: var(--accent, #5eb8d4);
    background: rgba(29, 91, 120, 0.22);
    color: var(--text-1, #f5f7fa);
}
.dash-premium-chip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
}
.dash-premium-chip-grid--multi .dash-premium-chip {
    position: relative;
}
.dash-premium-chip-grid--row {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.dash-form-subpanel--food .dash-premium-chip-grid--multi {
    grid-template-columns: repeat(2, 1fr);
}
.dash-premium-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 64px;
    padding: 0.45rem 0.35rem;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-2, #c5ced8);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.dash-premium-chip--wide {
    min-height: 48px;
    flex-direction: row;
    justify-content: center;
    padding: 0.65rem 0.85rem;
}
.dash-premium-chip:hover {
    border-color: rgba(94, 184, 212, 0.4);
}
.dash-premium-chip--selected {
    border-color: var(--accent, #5eb8d4);
    background: rgba(29, 91, 120, 0.25);
    color: var(--text-1, #f5f7fa);
}
.dash-premium-chip__icon {
    font-size: 20px;
    color: var(--accent, #5eb8d4);
}
.dash-premium-chip__label {
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}
.dash-premium-chip__check {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 16px;
    color: var(--accent, #5eb8d4);
}
.dash-premium-select-wrap {
    width: 100%;
}
.dash-premium-select {
    position: relative;
}
.dash-premium-select__input {
    width: 100%;
    appearance: none;
    padding: 0.75rem 2.25rem 0.75rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(29, 91, 120, 0.45);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-1, #f5f7fa);
    font-size: 0.9rem;
}
.dash-premium-select__chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--accent, #5eb8d4);
    font-size: 22px;
}
@media (max-width: 560px) {
    .dash-premium-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-premium-chip-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-premium-dual {
        grid-template-columns: 1fr;
    }
}

/* Opening hours editor (tips insert / edit) */
.dash-opening-hours {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.dash-opening-hours__card,
.dash-opening-hours__notes {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    overflow: hidden;
}
.dash-opening-hours__header,
.dash-opening-hours__notes-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dash-opening-hours__header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 14px;
    background: rgba(155, 166, 150, 0.18);
    color: var(--accent, #5eb8d4);
}
.dash-opening-hours__header-icon .material-icons {
    font-size: 20px;
}
.dash-opening-hours__header-icon--notes {
    background: rgba(122, 185, 201, 0.15);
}
.dash-opening-hours__header-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1, #f5f7fa);
}
.dash-opening-hours__header-sub {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-3, #9aa5b1);
}
.dash-opening-hours__default {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dash-opening-hours__default-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.65rem;
}
.dash-opening-hours__default-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}
.dash-opening-hours__pill {
    padding: 0.55rem 1rem;
    border-radius: 14px;
    border: 2px solid rgba(155, 166, 150, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.dash-opening-hours__pill:hover {
    border-color: rgba(155, 166, 150, 0.5);
    background: rgba(255, 255, 255, 0.1);
}
.dash-opening-hours__pill--sm {
    font-size: 0.85rem;
    padding: 0.45rem 0.75rem;
}
.dash-opening-hours__dash {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}
.dash-opening-hours__24h-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #9ba696;
}
.dash-opening-hours__24h-btn {
    padding: 0.45rem 0.85rem;
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.dash-opening-hours__24h-btn--on {
    border-color: rgba(155, 166, 150, 0.4);
    background: rgba(155, 166, 150, 0.2);
    color: #9ba696;
}
.dash-opening-hours__day {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
}
.dash-opening-hours__day--border {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dash-opening-hours__day-label {
    width: 52px;
    flex-shrink: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}
.dash-opening-hours__day-label--closed {
    color: rgba(232, 93, 58, 0.85);
}
.dash-opening-hours__day-mid {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}
.dash-opening-hours__closed-text {
    font-size: 0.88rem;
    font-style: italic;
    color: rgba(232, 93, 58, 0.8);
}
.dash-opening-hours__open-24 {
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(155, 166, 150, 0.9);
}
.dash-opening-hours__toggle {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(155, 166, 150, 0.15);
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.12s, background 0.15s;
}
.dash-opening-hours__toggle:hover {
    transform: scale(1.05);
    background: rgba(155, 166, 150, 0.25);
}
.dash-opening-hours__toggle--closed {
    background: rgba(232, 93, 58, 0.2);
    color: rgba(232, 93, 58, 0.9);
}
.dash-opening-hours__toggle--closed:hover {
    background: rgba(232, 93, 58, 0.3);
}
.dash-opening-hours__toggle .material-icons {
    font-size: 18px;
}
.dash-opening-hours__notes-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--text-1, #f5f7fa);
    font-size: 0.92rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.dash-opening-hours__notes-input:focus {
    outline: none;
}
.dash-oh-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}
.dash-oh-picker {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.dash-oh-picker__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.dash-oh-picker__col-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
}
.dash-oh-picker__list {
    width: 56px;
    max-height: 180px;
    overflow-y: auto;
    border-radius: 14px;
    border: 2px solid rgba(155, 166, 150, 0.25);
    background: rgba(255, 255, 255, 0.06);
    padding: 6px 0;
    scrollbar-width: none;
}
.dash-oh-picker__list::-webkit-scrollbar {
    display: none;
}
.dash-oh-picker__item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.dash-oh-picker__item:hover {
    background: rgba(255, 255, 255, 0.08);
}
.dash-oh-picker__item--active {
    background: rgba(155, 166, 150, 0.25);
    color: #9ba696;
}
.dash-oh-picker__confirm {
    padding: 0.75rem 1.5rem;
    border-radius: 14px;
    border: 2px solid rgba(155, 166, 150, 0.4);
    background: rgba(155, 166, 150, 0.2);
    color: #9ba696;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
}
.dash-oh-picker__confirm:hover {
    background: rgba(155, 166, 150, 0.35);
}

/* ==================== MOBILE-FIRST ENHANCEMENTS ==================== */
html.cosmic:has(.dashboard-shell) .dash,
html.cosmic:has(.dashboard-auth-gate) .dash-login {
    min-height: 100dvh;
}

.dash .topbar {
    padding-top: var(--modal-safe-top);
    min-height: calc(56px + var(--modal-safe-top));
}

@media (max-width: 768px) {
    .dash-content {
        padding: 0.85rem;
        padding-bottom: calc(1rem + var(--modal-safe-bottom));
    }

    .content-toolbar {
        position: sticky;
        top: 0;
        z-index: 20;
        background: rgba(11, 17, 23, 0.92);
        backdrop-filter: blur(10px);
        margin: 0 -0.85rem 0.75rem;
        padding: 0.5rem 0.85rem;
    }

    .content-toolbar .tabs {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0.35rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .content-toolbar .tabs::-webkit-scrollbar {
        display: none;
    }

    .content-toolbar .tab-btn {
        flex: 0 0 auto;
        min-height: var(--touch-min);
        padding: 0.65rem 1rem;
        white-space: nowrap;
    }

    .sidebar-hero-title {
        font-size: 0.9rem;
        line-height: 1.3;
        text-align: center;
        max-width: 100%;
    }

    .dash-sidebar .sidebar-search input {
        min-height: var(--touch-min);
        font-size: 16px;
    }

    .posts-area {
        min-height: auto;
    }

    .btn-icon-only,
    .modal-close {
        min-width: var(--touch-min);
        min-height: var(--touch-min);
    }

    .modal-close {
        width: var(--touch-min);
        height: var(--touch-min);
    }

    .modal-footer .btn {
        min-height: var(--touch-min);
    }

    .tips-premium-media-grid,
    .media-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .image-preview-container {
        min-height: clamp(140px, 38vw, 220px);
    }

    .category-bar-wrap {
        padding: 1rem;
    }

    .category-pills {
        grid-template-columns: repeat(2, 1fr);
    }

    .subcategory-filter-btn {
        flex: 1 1 calc(50% - 0.35rem);
        min-width: 0;
        min-height: var(--touch-min);
    }
}

@media (max-width: 639px) {
    .dashboard-form-modal {
        padding: 12px 14px calc(12px + var(--modal-safe-bottom));
        align-items: center;
    }

    .dashboard-form-modal__panel {
        width: 100%;
        max-width: min(480px, 100%);
        max-height: min(90dvh, 90svh);
        height: auto;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        margin: auto 0;
    }

    .dashboard-form-modal__header {
        flex-shrink: 0;
        padding-top: 0.75rem;
    }

    .dashboard-form-modal .modal-progress {
        flex-shrink: 0;
    }

    .dashboard-form-modal__body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .dashboard-form-modal__footer {
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        background: rgba(12, 18, 28, 0.96);
        backdrop-filter: blur(12px);
        padding-bottom: calc(1rem + var(--modal-safe-bottom));
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .dashboard-form-modal .progress-steps {
        gap: 0.25rem;
    }

    .dashboard-form-modal .step-label {
        display: none;
    }

    .dashboard-form-modal .step-number {
        width: 26px;
        height: 26px;
    }

    .dash-mapbox-picker__map {
        height: clamp(180px, 42vh, 280px);
    }

    .dash-opening-hours__day {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .dash-opening-hours__day-label {
        width: 44px;
        text-align: center;
    }

    .dash-opening-hours__day-mid {
        flex: 1;
        justify-content: center;
    }

    .dash-opening-hours__default-row {
        justify-content: center;
    }

    .dash-opening-hours__toggle {
        width: var(--touch-min);
        height: var(--touch-min);
    }

    .dash-opening-hours__pill {
        min-height: var(--touch-min);
        min-width: 4.25rem;
    }

    .dash-oh-picker-overlay {
        align-items: flex-end;
        padding: 0 16px calc(12px + var(--modal-safe-bottom));
    }

    .dash-oh-picker {
        width: 100%;
        max-width: min(400px, 100%);
        margin: 0 auto;
        border-radius: 20px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 1.25rem 1rem 1.25rem;
    }

    .dash-oh-picker__list {
        width: min(72px, 22vw);
        max-height: min(32vh, 220px);
    }

    .dash-oh-picker__item {
        min-height: 40px;
    }

    .dash-oh-picker__confirm {
        flex: 1 1 100%;
        min-height: var(--touch-min);
        margin-top: 0.5rem;
    }

    .dash-premium-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-premium-chip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-premium-chip {
        min-height: var(--touch-min);
    }

    .dash-premium-dual {
        grid-template-columns: 1fr;
    }

    .dash-premium-card {
        min-height: 72px;
    }
}

@media (max-width: 400px) {
    .dash-premium-cat-grid,
    .dash-premium-chip-grid {
        grid-template-columns: 1fr;
    }

    .sidebar-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-hero {
        width: 100%;
        max-width: 280px;
        height: auto;
        min-height: 64px;
        flex-direction: row;
        margin: 0 auto;
    }
}

@media (hover: none) {
    .remove-image-btn,
    .edit-image-btn,
    .media-preview-overlay {
        opacity: 1;
    }
}

.media-preview-broken-icon {
    font-size: 40px;
    opacity: 0.5;
}