:root { 
  --ink:#2c3e50; 
  --muted:#6c7a89; 
  --brand:#5d7a8c; 
  --brand-light:#7a95a8;
  --bg:#f8f9fa; 
  --card:#ffffff;
  --success:#6c9a8b;
  --error:#c07c6f;
  --warning:#b5916d;
  --accent1:#8993a4;
  --accent2:#a89093;
  --accent3:#89a498;
  --accent4:#a5968d;
}
*{box-sizing:border-box;margin:0;padding:0} 
html,body{margin:0!important;padding:0!important;min-height:100vh}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;line-height:1.6}
.wrap{max-width:980px;margin:0 auto;padding:24px}
main.wrap{margin-top:80px}
.bar{background:#2c3e50;color:#fff;padding:12px 0;margin:0!important;display:block;position:fixed;top:0;left:0;right:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,0.1)} 
.bar .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:12px 20px}
.bar nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bar nav>a,.bar nav .dropbtn{color:#fff;text-decoration:none;padding:6px 11px;border-radius:6px;background:rgba(255,255,255,0.1);transition:all 0.2s;font-size:13px;font-weight:500;border:none;cursor:pointer;display:inline-block;white-space:nowrap} 
.bar nav>a:hover,.bar nav .dropbtn:hover{background:rgba(255,255,255,0.2);transform:translateY(-1px)}

/* Responsive header for longer language text (BM) */
@media (max-width:1200px){
  .bar nav{gap:5px}
  .bar nav>a,.bar nav .dropbtn{padding:6px 10px;font-size:12.5px}
}
@media (max-width:1024px){
  .bar nav>a,.bar nav .dropbtn{padding:6px 9px;font-size:12px}
}
@media (max-width:900px){
  .bar nav{gap:4px}
  .bar nav>a,.bar nav .dropbtn{padding:5px 8px;font-size:11.5px}
}
.brand a{background:none!important;padding:0!important}

/* Dropdown Navigation */
.dropdown{position:relative;display:inline-block}
.dropdown-content{display:none;position:absolute;background:#2c3e50;min-width:200px;box-shadow:0 8px 16px rgba(0,0,0,0.3);z-index:1000;border-radius:6px;margin-top:2px;border:1px solid rgba(255,255,255,0.1)}
.dropdown-content a{color:#fff;padding:10px 16px;text-decoration:none;display:block;font-size:14px;transition:background 0.2s;background:none!important}
.dropdown-content a:hover{background:rgba(255,255,255,0.15)!important;border-radius:0}
.dropdown:hover .dropdown-content{display:block}
.dropdown:hover .dropbtn{background:rgba(255,255,255,0.2)}
.brand{font-weight:800;font-size:20px;display:flex;align-items:center}
.logo{height:70px;width:auto;vertical-align:middle;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));transition:transform 0.2s ease}
.logo:hover{transform:scale(1.05)}

/* Mobile Menu Toggle */
.mobile-menu-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;padding:8px;cursor:pointer;position:relative;z-index:1001}
.mobile-menu-toggle span{display:block;width:24px;height:3px;background:#fff;transition:all 0.3s ease;border-radius:2px}
.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(7px,7px)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}

/* Mobile Menu Overlay (tap to close) */
.mobile-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:998;opacity:0;transition:opacity 0.3s ease}
.mobile-overlay.active{display:block;opacity:1}

/* Mobile Menu Close Button - Hidden, using hamburger transform instead */
.mobile-menu-close{display:none!important}

/* Hero Carousel */
.hero-carousel{position:relative;height:400px;background:linear-gradient(135deg,#5d7a8c 0%,#8993a4 100%);border-radius:16px;overflow:hidden;margin:0 0 40px 0!important;box-shadow:0 20px 60px rgba(0,0,0,0.15);touch-action:pan-x pinch-zoom;user-select:none}
.hero-carousel::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);pointer-events:none;z-index:1}
.carousel-slide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.8s ease-in-out;padding:40px 40px 80px 40px;z-index:2;background-size:cover;background-position:center;pointer-events:none!important;touch-action:pan-x}
.carousel-slide.active{opacity:1;pointer-events:auto!important;z-index:3;touch-action:pan-x}
.slide-1{background-image:linear-gradient(rgba(93,122,140,0.85),rgba(137,147,164,0.85)),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 500"><rect fill="%235d7a8c" width="1200" height="500"/><g opacity="0.1"><circle fill="%23fff" cx="100" cy="100" r="80"/><circle fill="%23fff" cx="900" cy="350" r="120"/><rect fill="%23fff" x="600" y="150" width="200" height="200" rx="20"/></g></svg>')}
.slide-2{background-image:linear-gradient(rgba(107,154,111,0.85),rgba(139,168,143,0.85)),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 500"><rect fill="%236b9a6f" width="1200" height="500"/><g opacity="0.1"><rect fill="%23fff" x="100" y="100" width="150" height="150" rx="10"/><rect fill="%23fff" x="800" y="200" width="200" height="200" rx="10"/><circle fill="%23fff" cx="500" cy="250" r="100"/></g></svg>')}
.slide-3{background-image:linear-gradient(rgba(184,116,95,0.85),rgba(201,137,122,0.85)),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 500"><rect fill="%23b8745f" width="1200" height="500"/><g opacity="0.1"><path fill="%23fff" d="M200,150 L350,150 L275,300 Z"/><circle fill="%23fff" cx="900" cy="250" r="100"/><rect fill="%23fff" x="500" y="100" width="150" height="250" rx="15"/></g></svg>')}
.carousel-content{text-align:center;color:#fff;max-width:800px}
.hero-title{font-size:48px;font-weight:800;margin:0 0 16px 0;text-shadow:0 2px 10px rgba(0,0,0,0.3);line-height:1.2}
.hero-subtitle{font-size:20px;margin:0 0 32px 0;opacity:0.95;text-shadow:0 1px 3px rgba(0,0,0,0.2)}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:0}
.btn-hero{
  background:#fff;
  color:#2c3e50;
  font-size:18px;
  padding:16px 32px;
  font-weight:700;
  box-shadow:0 4px 15px rgba(0,0,0,0.25);
  border-radius:10px;
  text-decoration:none;
  display:inline-block;
  transition:all 0.3s ease;
  border:2px solid #fff;
}
.btn-hero:hover{
  background:#f0f0f0;
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,0.3);
}
.btn-hero:active{
  transform:translateY(0);
  box-shadow:0 3px 10px rgba(0,0,0,0.2);
}
.btn-hero-outline{
  background:transparent;
  color:#fff;
  border:2px solid #fff;
  font-size:18px;
  padding:14px 32px;
  font-weight:600;
  border-radius:10px;
  text-decoration:none;
  display:inline-block;
  transition:all 0.3s ease;
}
.btn-hero-outline:hover{
  background:rgba(255,255,255,0.2);
  transform:translateY(-2px);
  box-shadow:0 4px 15px rgba(0,0,0,0.15);
}
.btn-hero-outline:active{
  transform:translateY(0);
  background:rgba(255,255,255,0.15);
}
.carousel-dots{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex!important;
  gap:12px;
  z-index:15!important;
  pointer-events:auto!important;
  padding:8px 16px;
  background:rgba(0,0,0,0.3);
  border-radius:20px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.carousel-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  cursor:pointer;
  transition:all 0.3s ease;
  pointer-events:auto!important;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  border:2px solid transparent;
}
.carousel-dot.active{
  background:#fff;
  width:32px;
  border-radius:6px;
  box-shadow:0 3px 8px rgba(0,0,0,0.3);
}
.carousel-dot:hover{
  background:rgba(255,255,255,0.8);
  transform:scale(1.15);
  border-color:rgba(255,255,255,0.3);
}

/* Gradient Cards */
.card-gradient-1{background:linear-gradient(135deg,#5d7a8c 0%,#7a95a8 100%);color:#fff;border:none}
.card-gradient-1 h3{color:#fff}
.card-gradient-2{background:linear-gradient(135deg,#a89093 0%,#bea6a9 100%);color:#fff;border:none}
.card-gradient-2 h3{color:#fff}
.card-gradient-3{background:linear-gradient(135deg,#89a498 0%,#a3beb1 100%);color:#fff;border:none}
.card-gradient-3 h3{color:#fff}
.card-gradient-1:hover,.card-gradient-2:hover,.card-gradient-3:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,0.15)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:24px}
.card{display:block;background:var(--card);border:1px solid #e6e9f3;border-radius:12px;padding:20px;color:inherit;text-decoration:none;transition:transform 0.2s,box-shadow 0.2s}
.card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.card h3{margin:0 0 8px 0;color:var(--ink)}
.card p{margin:4px 0;font-size:14px}
.card .price{color:var(--brand);font-weight:600;font-size:18px;margin-top:8px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:24px}

.stack{display:grid;gap:16px}
.form-max{max-width:600px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}

label{display:grid;gap:8px;font-size:14px;font-weight:500} 
input,textarea,select{padding:12px;border:1px solid #cdd6f4;border-radius:8px;background:#fff;font-size:14px;font-family:inherit;transition:border-color 0.2s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,102,255,0.1)}
textarea{resize:vertical;min-height:100px}

button,.btn{background:var(--brand);color:#fff;border:none;border-radius:8px;padding:12px 20px;cursor:pointer;text-decoration:none;display:inline-block;font-size:14px;font-weight:500;transition:background 0.2s,transform 0.1s;text-align:center}
button:hover,.btn:hover{background:var(--brand-light);transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(0)}
.btn-large{padding:14px 24px;font-size:16px}
.btn:disabled{opacity:0.6;cursor:not-allowed}

.alert{background:#f7f0e8;border:1px solid #e8d9c4;color:#6b5d4f;padding:12px 16px;border-radius:8px;margin:16px 0}
.alert-success{background:#e8f0e6;border-color:#6b8e6f;color:#3d5440}
.alert-error{background:#f5ebe8;border-color:#b8745f;color:#7a4d3f}

/* Loading Overlay */
.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity 0.3s}
.loading-overlay.active{opacity:1;pointer-events:auto}
.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Toast Notifications */
.toast{position:fixed;top:20px;right:20px;background:#fff;padding:16px 20px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);display:flex;align-items:center;gap:12px;max-width:400px;transform:translateX(450px);transition:transform 0.3s;z-index:1001}
.toast-show{transform:translateX(0)}
.toast-icon{font-size:20px;font-weight:bold}
.toast-message{flex:1;font-size:14px}
.toast-close{background:none;border:none;font-size:24px;color:var(--muted);cursor:pointer;padding:0;width:24px;height:24px;line-height:1}
.toast-success{border-left:4px solid #10b981}.toast-success .toast-icon{color:#10b981}
.toast-error{border-left:4px solid #ef4444}.toast-error .toast-icon{color:#ef4444}
.toast-warning{border-left:4px solid #f59e0b}.toast-warning .toast-icon{color:#f59e0b}
.toast-info{border-left:4px solid #3b82f6}.toast-info .toast-icon{color:#3b82f6}

/* Lightbox */
#lightbox{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2000;display:none;align-items:center;justify-content:center}
#lightbox.active{display:flex}
.lightbox-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.9);cursor:pointer}
.lightbox-content{position:relative;max-width:90%;max-height:90%;z-index:1}
.lightbox-img{max-width:100%;max-height:90vh;display:block;border-radius:8px}
.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;background:rgba(255,255,255,0.9);border:none;font-size:32px;width:50px;height:50px;border-radius:50%;cursor:pointer;color:#2c3e50;font-weight:bold;transition:all 0.2s}
.lightbox-close{top:-60px;right:0}
.lightbox-prev{left:-70px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:-70px;top:50%;transform:translateY(-50%)}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:#fff;transform:scale(1.1)}

.muted{color:var(--muted);font-size:14px}

/* Badges */
.badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;text-transform:uppercase;background:#e8ebe0;color:var(--muted)}
.badge-live{background:#e8f0e6;color:#4d6b51}
.badge-ended{background:#f5ebe8;color:#7a4d3f}
.badge-sold{background:#e5e8ed;color:#4d5c6b}
.badge-draft{background:#f0f0f0;color:#5a5a5a}

/* Auth pages */
.auth-container{max-width:420px;margin:40px auto}
.auth-footer{margin-top:24px;text-align:center;color:var(--muted)}

/* Listing detail */
.back-link{display:inline-block;margin-bottom:16px;color:var(--brand);text-decoration:none;font-size:14px}
.back-link:hover{text-decoration:underline}
.listing-detail{margin-top:24px}
.listing-meta{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.listing-info{display:grid;grid-template-columns:2fr 1fr;gap:32px;margin-top:32px}
@media (max-width:768px){
  .listing-info{grid-template-columns:1fr}
  
  /* Mobile Navigation */
  .mobile-menu-toggle{display:flex!important;z-index:1002!important;background:rgba(44,62,80,0.8);padding:10px;border-radius:8px}
  .mobile-menu-close{display:none!important}
  .main-nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#2c3e50;
    transform:translateX(-100%);
    transition:transform 0.3s ease;
    overflow-y:auto;
    padding:80px 20px 100px 20px;
    z-index:999;
    display:flex;
    flex-direction:column;
    box-shadow:-4px 0 20px rgba(0,0,0,0.3);
  }
  .main-nav.mobile-open{transform:translateX(0)!important}
  
  /* Add helpful hint at top of menu */
  .main-nav::before{
    content:'Tap ✕ to close';
    position:absolute;
    top:16px;
    left:0;
    right:0;
    text-align:center;
    font-size:13px;
    font-weight:500;
    color:rgba(255,255,255,0.6);
    letter-spacing:0.5px;
  }
  .bar nav{flex-direction:column;align-items:stretch;gap:16px}
  .bar nav>a,.bar nav .dropbtn{
    display:block;
    width:100%;
    text-align:left;
    padding:14px 16px!important;
    font-size:16px!important;
  }
  .dropdown{display:block;width:100%}
  .dropdown-content{
    position:static!important;
    box-shadow:none!important;
    margin-top:8px;
    border:none;
    background:rgba(255,255,255,0.05)!important;
    border-radius:6px;
    display:none;
  }
  .dropdown:hover .dropdown-content{display:block!important}
  .dropdown-content a{padding:12px 20px!important;background:none!important}
  
  /* Mobile Carousel - Fixed Layout */
  .hero-carousel{
    height:560px;
    border-radius:0;
    margin:0 -12px 32px -12px!important;
    touch-action:pan-y pinch-zoom;
  }
  .carousel-slide{
    padding:30px 20px 100px 20px!important;
    touch-action:pan-y;
  }
  .carousel-content{
    padding:0!important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100%;
  }
  .hero-title{
    font-size:28px;
    line-height:1.3;
    margin-bottom:14px;
  }
  .hero-subtitle{
    font-size:16px;
    line-height:1.5;
    margin-bottom:32px;
  }
  .hero-cta{
    width:100%;
    max-width:320px;
    flex-direction:column;
    gap:16px;
    margin-bottom:64px!important;
  }
  .btn-hero,.btn-hero-outline{
    font-size:17px;
    padding:18px 28px;
    width:100%;
    text-align:center;
    pointer-events:auto;
    z-index:5;
    position:relative;
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 5px 15px rgba(0,0,0,0.25);
    font-weight:700;
    letter-spacing:0.3px;
  }
  .btn-hero{
    background:#fff!important;
    color:#2c3e50!important;
  }
  .btn-hero-outline{
    background:rgba(255,255,255,0.1)!important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .btn-hero:active,.btn-hero-outline:active{
    transform:scale(0.98);
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
  }
  .carousel-dots{
    bottom:32px!important;
    z-index:15!important;
    gap:18px!important;
    padding:10px 20px!important;
    background:rgba(0,0,0,0.4)!important;
  }
  .carousel-dot{
    width:18px!important;
    height:18px!important;
    pointer-events:auto!important;
    z-index:15!important;
    box-shadow:0 3px 8px rgba(0,0,0,0.3)!important;
  }
  .carousel-dot.active{
    width:44px!important;
    box-shadow:0 4px 10px rgba(255,255,255,0.2)!important;
  }
  .carousel-dot:active{
    transform:scale(0.95);
  }
  
  /* Mobile Cards */
  .grid,.cards{grid-template-columns:1fr;gap:16px}
  .form-row{grid-template-columns:1fr}
  
  /* Mobile Tables */
  table{font-size:12px}
  th,td{padding:8px!important}
}

.listing-main h2{margin-top:32px;margin-bottom:16px;font-size:20px}
.listing-main h2:first-child{margin-top:0}
.details-list{list-style:none;padding:0;margin:16px 0}
.details-list li{padding:8px 0;border-bottom:1px solid #e6e9f3}
.details-list li:last-child{border-bottom:none}

.listing-sidebar{position:sticky;top:24px;height:fit-content}
.price-box{background:var(--card);border:2px solid #e6e9f3;border-radius:12px;padding:24px;text-align:center;margin-bottom:24px}
.price-label{font-size:14px;color:var(--muted);margin-bottom:8px}
.price-amount{font-size:32px;font-weight:700;color:var(--brand);margin-bottom:8px}

.bids-section{margin-top:24px}
.bids-section h3{margin-bottom:16px;font-size:18px}
.bid-form{display:grid;gap:12px}

.bids-history{margin-top:48px;padding-top:32px;border-top:2px solid #e6e9f3}
.bids-list{display:grid;gap:12px;margin-top:16px}
.bid-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--card);border:1px solid #e6e9f3;border-radius:8px}
.bid-amount{font-size:20px;font-weight:600;color:var(--brand)}
.bid-info{display:flex;flex-direction:column;align-items:flex-end;gap:4px}

/* Dashboard */
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px}
@media (max-width:768px){.dashboard-grid{grid-template-columns:1fr}}

.dashboard-section{background:var(--card);border:1px solid #e6e9f3;border-radius:12px;padding:24px}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.section-header h2{margin:0}
.dashboard-section h2{margin-top:0;margin-bottom:20px;font-size:20px}

.listings-list,.bids-list{display:grid;gap:12px}
.dashboard-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--bg);border:1px solid #e6e9f3;border-radius:8px}
.dashboard-item:hover{background:#f0f2f7}
.item-main{flex:1}
.item-main h3{margin:0 0 4px 0;font-size:16px}
.item-main h3 a{color:var(--ink);text-decoration:none}
.item-main h3 a:hover{color:var(--brand)}
.item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}

/* Content pages */
.content-page{max-width:700px;margin-top:24px}
.content-page h2{margin-top:32px;margin-bottom:16px;font-size:20px}
.content-page ul,.content-page ol{padding-left:24px;margin:16px 0}

/* Stats cards */
.stat-card{background:linear-gradient(135deg,#e8ebe0,#f0f2e8);border-radius:12px;padding:24px;text-align:center}
.stat-value{font-size:36px;font-weight:800;color:var(--brand);margin-bottom:8px}
.stat-label{font-size:14px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:0.5px}

/* Messages */
.message-item{background:var(--card);border:1px solid #e6e9f3;border-radius:8px;padding:16px;margin-bottom:12px}
.message-unread{border-left:4px solid var(--brand);background:#f0f5ff}
.message-header{display:flex;justify-content:space-between;margin-bottom:8px}
.message-ref{font-size:13px;color:var(--muted);margin-bottom:12px}
.message-body{line-height:1.6}

/* Responsive - Mobile First */
@media (max-width:1024px){
  section[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  .wrap{padding:16px}
}

@media (max-width:768px){
  /* Layout */
  .grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .wrap{padding:12px}
  main.wrap{margin-top:90px}
  
  /* Mobile Header - Compact & Clean */
  .bar{padding:6px 0}
  .bar .wrap{padding:10px 16px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
  .brand{grid-column:1;flex:0 0 auto}
  .mobile-menu-toggle{
    grid-column:3!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    flex:0 0 auto;
    z-index:1002;
    margin-left:auto;
  }
  .main-nav{grid-column:1/-1}
  
  /* Force all grids to single column on mobile for symmetry */
  div[style*="grid-template-columns:repeat(2,1fr)"]{grid-template-columns:1fr!important}
  div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important}
  div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr!important}
  .contact-grid{grid-template-columns:1fr!important}
  .quick-actions{flex-direction:column}
  .quick-actions a{min-width:100%}
  
  /* Hero Carousel - Override for smaller devices */
  section[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr!important}
  
  /* Improved spacing for sections */
  section{
    padding:40px 20px!important;
    margin:32px 0!important;
  }
  
  /* Better visual hierarchy for headings */
  section h2{
    font-size:28px!important;
    margin-bottom:20px!important;
  }
  
  section h3{
    font-size:18px!important;
  }
  
  /* Improved quick-box cards on mobile */
  .quick-box{
    padding:28px!important;
    margin-bottom:16px;
  }
  
  .quick-box h3{
    font-size:19px!important;
  }
  
  .quick-box p{
    font-size:15px!important;
    line-height:1.6!important;
  }
  
  .quick-icon{
    font-size:52px!important;
    margin-bottom:14px!important;
  }
  
  /* Touch-friendly buttons - minimum 44x44px */
  button,.btn{padding:12px 20px;min-height:44px}
  .bar nav>a,.bar nav .dropbtn{padding:12px 16px;min-height:44px}
  
  /* Forms */
  input,textarea,select{font-size:16px;padding:12px}
  label{font-size:14px}
  
  /* Cards */
  .card{padding:16px}
  
  /* Tables - Responsive */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #e6e9f3;border-radius:8px}
  thead{display:none}
  tbody tr{display:block;margin-bottom:12px;border:1px solid #e6e9f3;border-radius:8px;padding:12px;background:#fff}
  tbody td{display:block;text-align:right;padding:8px 0;border:none}
  tbody td:before{content:attr(data-label);float:left;font-weight:600;color:var(--muted)}
  .admin-table tbody td:before{content:attr(data-label)}
  
  /* Stat Cards */
  .stat-cards{grid-template-columns:1fr!important}
  
  /* Content Pages */
  .content-page{padding:0;font-size:16px}
  .content-page h1{font-size:28px}
  .content-page h2{font-size:22px}
  .content-page h3{font-size:18px}
  
  /* Filters and Search */
  .filter-row{grid-template-columns:1fr!important}
  
  /* Toast Notifications */
  .toast{left:10px;right:10px;max-width:calc(100vw - 20px);transform:translateX(calc(100vw + 20px))}
  .toast-show{transform:translateX(0)}
  
  /* Impact page mobile */
  div[style*="font-size:72px"]{font-size:48px!important}
  div[style*="font-size:24px"][style*="font-weight:600"]{font-size:20px!important}
  div[style*="padding:48px"]{padding:24px!important}
  
  /* Report cards mobile */
  .report-card,.vehicle-report{padding:16px!important}
  
  /* Inline grid overrides */
  div[style*="display:grid"][style*="grid-template-columns"]{grid-template-columns:1fr!important}
  div[style*="minmax(220px"]{grid-template-columns:1fr!important}
  div[style*="minmax(240px"]{grid-template-columns:1fr!important}
  div[style*="minmax(200px"]{grid-template-columns:1fr!important}
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav{
  display:none;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#fff;
  border-top:2px solid #e0e7ee;
  padding:8px 0;
  z-index:100;
  box-shadow:0 -4px 12px rgba(0,0,0,0.08)
}
.mobile-nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:var(--muted);
  font-size:11px;
  padding:8px 12px;
  border-radius:8px;
  transition:all 0.2s;
  position:relative;
  flex:1
}
.mobile-nav-item:hover,.mobile-nav-item.active{
  color:var(--brand);
  background:rgba(93,122,140,0.08)
}
.mobile-nav-icon{
  font-size:24px;
  margin-bottom:4px
}
.mobile-nav-label{
  font-weight:500
}
.mobile-nav-fab{
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;
  border-radius:50%;
  width:56px;
  height:56px;
  margin-top:-28px;
  box-shadow:0 4px 12px rgba(239,68,68,0.4);
  padding:0;
  justify-content:center
}
.mobile-nav-fab:hover{
  transform:scale(1.1);
  background:linear-gradient(135deg,#dc2626,#b91c1c);
  color:#fff
}
.mobile-nav-fab .mobile-nav-icon{
  margin:0
}
.mobile-nav-badge{
  position:absolute;
  top:4px;
  right:8px;
  background:#ef4444;
  color:#fff;
  border-radius:10px;
  padding:2px 6px;
  font-size:10px;
  font-weight:700;
  min-width:18px;
  text-align:center
}

@media (max-width:768px){
  .mobile-bottom-nav{
    display:flex;
    justify-content:space-around
  }
  main.wrap{
    margin-bottom:80px
  }
}

@media (max-width:480px){
  /* Extra small screens */
  .hero-title{font-size:24px}
  .hero-subtitle{font-size:14px}
  .btn-hero,.btn-hero-outline{font-size:14px;padding:10px 20px}
  h1{font-size:24px}
  h2{font-size:20px}
  .card h3{font-size:16px}
  
  /* Compact header */
  .bar{padding:4px 0}
  .bar .wrap{padding:8px 12px;gap:12px}
  .brand img,.logo{height:50px}
  .lang-btn{padding:6px 10px;font-size:11px}
  main.wrap{margin-top:75px}
  
  /* Single column forms */
  .filter-row,.form-row{grid-template-columns:1fr!important}
}