.mobile-bottom-nav { display: none; }
.mobile-more-menu, .mobile-more-backdrop, .mobile-create-menu, .mobile-create-backdrop { display: none; }

@media (max-width: 768px) {
    .sidebar { top: 0; right: auto; bottom: 0; left: 0; width: 85%; max-width: 300px; height: 100%; padding-bottom: 0; transform: translateX(-100%); border: 0; border-right: 1px solid #e2e8f0; background: #fff; box-shadow: 12px 0 35px rgba(15,23,42,.14); overflow: hidden; }
    .sidebar.active { transform: translateX(0); }
    .sidebar .sidebar-header { display: flex !important; }
    .sidebar .sidebar-close-btn { display: flex !important; }
    .sidebar .nav-menu { width: auto; height: auto; padding: 10px 14px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; }
    .sidebar .nav-section-label { display: block !important; }
    .sidebar .nav-item, .app-container.sidebar-collapsed .sidebar .nav-item { flex: 0 0 auto; min-width: 0; min-height: 40px; padding: 7px 9px; display: flex; flex-direction: row; justify-content: flex-start; gap: 10px; text-align: left; scroll-snap-align: none; }
    .sidebar .nav-item span, .app-container.sidebar-collapsed .sidebar .nav-item span { display: block; width: auto; font-size: .79rem; line-height: 1.2; }
    .sidebar .nav-icon { width: 27px; height: 27px; flex: 0 0 27px; }
    .sidebar-overlay { display: block !important; }

    .mobile-bottom-nav { position: fixed; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); left: 12px; z-index: 1280; min-height: 72px; padding: 7px 8px; display: grid; grid-template-columns: repeat(5,1fr); align-items: end; gap: 2px; border: 1px solid rgba(226,232,240,.92); border-radius: 22px; background: rgba(255,255,255,.97); box-shadow: 0 14px 38px rgba(15,23,42,.17); backdrop-filter: blur(18px); }
    .mobile-nav-item { min-width: 0; height: 56px; padding: 5px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 13px; background: transparent; color: #475569; font-size: .63rem; font-weight: 750; cursor: pointer; }
    .mobile-nav-item i { font-size: 1.55rem; }
    .mobile-nav-item.active { color: #0869ed; background: #f4f8ff; }
    .mobile-nav-create { align-self: start; width: 64px; height: 64px; margin: -27px auto 0; border: 5px solid #fff; border-radius: 50%; background: linear-gradient(145deg,#1680ff,#075be0); color: #fff; box-shadow: 0 10px 24px rgba(20,104,238,.38); }
    .mobile-nav-create i { font-size: 2rem; font-weight: 400; }
    .mobile-nav-create.active { color: #fff; background: linear-gradient(145deg,#1680ff,#075be0); }

    .mobile-more-backdrop { position: fixed; inset: 0; z-index: 1270; display: block; background: rgba(15,23,42,.28); backdrop-filter: blur(2px); }
    .mobile-more-backdrop[hidden] { display: none; }
    .mobile-more-menu { position: fixed; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); left: 12px; z-index: 1275; max-height: min(68vh, 520px); padding: 8px 12px 14px; display: block; overflow: hidden; border: 1px solid rgba(226,232,240,.96); border-radius: 22px; background: rgba(255,255,255,.99); box-shadow: 0 24px 60px rgba(15,23,42,.24); opacity: 0; transform: translateY(18px) scale(.98); transform-origin: bottom center; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
    .mobile-more-menu.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
    .mobile-more-handle { width: 38px; height: 4px; margin: 0 auto 7px; border-radius: 999px; background: #cbd5e1; }
    .mobile-more-header { min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 5px 7px; color: #0f172a; }
    .mobile-more-header strong { font-size: .96rem; }
    .mobile-more-header button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 11px; background: #f1f5f9; color: #475569; font-size: 1.2rem; }
    .mobile-more-list { max-height: calc(min(68vh, 520px) - 62px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; overflow-y: auto; overscroll-behavior: contain; }
    .mobile-more-option { min-width: 0; min-height: 52px; padding: 9px 11px; display: flex; align-items: center; gap: 10px; border: 1px solid #e7edf5; border-radius: 14px; background: #f8fafc; color: #334155; text-align: left; font: inherit; font-size: .78rem; font-weight: 750; }
    .mobile-more-option:active { border-color: #bfdbfe; background: #eff6ff; color: #0869ed; transform: scale(.98); }
    .mobile-more-option .nav-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 9px; background: #eaf2ff; color: #0869ed; font-size: 1.12rem; }

    .mobile-create-backdrop { position: fixed; inset: 0; z-index: 1270; display: block; background: rgba(15,23,42,.32); backdrop-filter: blur(2px); }
    .mobile-create-backdrop[hidden] { display: none; }
    .mobile-create-menu { position: fixed; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); left: 12px; z-index: 1275; padding: 8px 12px 14px; display: block; border: 1px solid rgba(226,232,240,.96); border-radius: 22px; background: rgba(255,255,255,.99); box-shadow: 0 24px 60px rgba(15,23,42,.24); opacity: 0; transform: translateY(18px) scale(.98); transform-origin: bottom center; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
    .mobile-create-menu.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
    .mobile-create-handle { width: 38px; height: 4px; margin: 0 auto 8px; border-radius: 999px; background: #cbd5e1; }
    .mobile-create-header { min-height: 48px; padding: 0 4px 8px 7px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .mobile-create-header > div { display: grid; gap: 3px; }
    .mobile-create-header strong { color: #0f172a; font-size: .96rem; }
    .mobile-create-header small { color: #64748b; font-size: .7rem; }
    .mobile-create-header button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 11px; background: #f1f5f9; color: #475569; font-size: 1.2rem; }
    .mobile-create-options { display: grid; gap: 8px; }
    .mobile-create-options > button { min-height: 68px; padding: 10px 12px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 20px; align-items: center; gap: 11px; border: 1px solid #e4ebf4; border-radius: 15px; background: #f8fafc; color: #334155; text-align: left; font: inherit; }
    .mobile-create-options > button:active { border-color: #bfdbfe; background: #eff6ff; transform: scale(.985); }
    .mobile-create-options > button > span:nth-child(2) { display: grid; gap: 3px; }
    .mobile-create-options > button strong { color: #172033; font-size: .8rem; }
    .mobile-create-options > button small { color: #64748b; font-size: .67rem; }
    .mobile-create-options > button > i { color: #94a3b8; }
    .create-option-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: 1.25rem; }
    .create-option-icon.budget { background: #eaf2ff; color: #0869ed; }
    .create-option-icon.shipping { background: #ecfdf3; color: #16a34a; }
}