@media (min-width: 960px){
  body{background:#f3f6f5}
  .fr-customer,.fr-staff{padding:0 246px 36px 0;min-height:100vh;background:#f3f6f5}
  .fr-customer .fr-head.container,.fr-staff .fr-head.container{max-width:1280px;padding:14px 30px;min-height:82px;background:rgba(243,246,245,.93);border-bottom:1px solid #e5ece9}
  .fr-customer .fr-main.container,.fr-staff .fr-main.container{max-width:1280px;padding:28px 30px 48px}

  .fr-customer .bottom-nav.fr-bottom-nav,.fr-staff .staff-bottom-nav.fr-staff-nav{
    position:fixed;z-index:60;top:24px;right:22px;bottom:auto;left:auto;width:202px;min-height:250px;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:7px;
    padding:70px 12px 14px;background:#fff;border:1px solid #dfe8e5;border-radius:22px;
    box-shadow:0 16px 44px rgba(31,70,58,.09);backdrop-filter:none
  }
  .fr-customer .bottom-nav.fr-bottom-nav:before,.fr-staff .staff-bottom-nav.fr-staff-nav:before{
    content:'نوبتینو';position:absolute;top:18px;right:18px;left:18px;height:42px;display:flex;align-items:center;
    padding-right:45px;font-size:17px;font-weight:800;color:#173c34;border-bottom:1px solid #edf1ef
  }
  .fr-customer .bottom-nav.fr-bottom-nav:after,.fr-staff .staff-bottom-nav.fr-staff-nav:after{
    content:'ن';position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:11px;background:#236b5b;color:#fff;
    display:grid;place-items:center;font-weight:800
  }
  .fr-customer .bottom-nav.fr-bottom-nav .nav-item,.fr-staff .staff-bottom-nav.fr-staff-nav>button{
    width:100%;height:48px;min-height:48px;border:0;border-radius:13px;background:transparent;color:#60726c;
    display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:11px;padding:0 13px;font-size:13px
  }
  .fr-customer .bottom-nav.fr-bottom-nav .nav-item.active,.fr-staff .staff-bottom-nav.fr-staff-nav>button.active{
    color:#236b5b;background:#e9f3f0;font-weight:800
  }
  .fr-customer .bottom-nav.fr-bottom-nav .fr-icon,.fr-staff .staff-bottom-nav.fr-staff-nav .fr-icon{width:21px;height:21px}

  .fr-staff-fab{position:fixed;z-index:65;right:35px;top:318px;bottom:auto;width:176px;height:46px;border:0;border-radius:13px;background:#236b5b;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:none}
  .fr-staff-fab small{font-size:12px;font-weight:700}

  .fr-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr);align-items:center;gap:28px;padding:30px 34px;border-radius:24px}
  .fr-hero h1{font-size:30px}.fr-hero .fr-search-launch{grid-column:2;grid-row:1/span 3;margin:0;min-height:62px}
  .fr-upcoming{padding:20px 22px}
  .fr-section{margin:26px 0}.fr-section-head h2{font-size:20px}
  .fr-salon-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.fr-salon-photo{height:178px}.fr-salon-info{padding:16px}
  .fr-service-chips{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.fr-service-chips button{min-height:88px}
  .fr-staff-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .fr-salon-cover{height:360px}.fr-salon-cover>div{right:30px;left:30px}.fr-salon-page>.container{max-width:1280px}
  .fr-facts{grid-template-columns:repeat(3,1fr);padding:16px}.fr-service-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

  .fr-book-footer{right:246px;padding:12px max(30px,calc((100vw - 1100px)/2));box-shadow:0 -8px 28px rgba(30,60,52,.05)}
  .fr-book-title,.fr-progress,.fr-choice-list,.fr-date-row,.fr-slots,.fr-summary{max-width:880px;margin-right:auto;margin-left:auto}
  .fr-choice-list{grid-template-columns:repeat(2,minmax(0,1fr))}.fr-slots{grid-template-columns:repeat(6,1fr)}
  .fr-appointment-list,.fr-staff-booking-list{gap:10px}.fr-appointment-list article,.fr-staff-booking-list article{grid-template-columns:120px 1fr 170px;padding:16px 18px}
  .fr-appointment-actions,.fr-status-actions{flex-direction:row;justify-content:flex-end;flex-wrap:wrap}

  .fr-staff-hero{display:grid;grid-template-columns:1fr minmax(420px,.9fr);gap:24px;align-items:center;background:linear-gradient(135deg,#1f6757,#2d806c);color:#fff;border-radius:24px;padding:28px 30px;margin-bottom:22px}
  .fr-staff-hero h1{font-size:28px;margin:6px 0}.fr-staff-hero p{margin:0;opacity:.82}
  .fr-staff-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.fr-staff-stats span{display:flex;flex-direction:column;justify-content:center;min-height:88px;padding:14px;border-radius:16px;background:rgba(255,255,255,.12);text-align:center}.fr-staff-stats b{font-size:22px}.fr-staff-stats small{opacity:.82;margin-top:5px}
  .fr-mini-bookings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fr-mini-bookings article{display:grid;grid-template-columns:70px 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid #e2ebe8;border-radius:16px;padding:14px}
  .fr-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.fr-quick-grid button{min-height:96px;border:1px solid #e2ebe8;border-radius:17px;background:#fff;color:#173c34;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
  .fr-customer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fr-customer-list>button{min-height:76px;border:1px solid #e2ebe8;border-radius:16px;background:#fff;display:grid;grid-template-columns:46px 1fr auto 22px;align-items:center;gap:10px;padding:12px;text-align:right;color:#173c34}
  .fr-form-card{max-width:760px;margin:18px auto;background:#fff;border:1px solid #e2ebe8;border-radius:20px;padding:22px}.fr-form-grid{grid-template-columns:repeat(2,1fr)}
  .fr-report-stats{max-width:900px;margin:0 auto 18px}

  .customer-modern,.staff-dashboard,.staff-menu{max-width:none!important}
  .page:not(.fr-customer):not(.fr-staff)>.bottom-nav{right:22px;left:auto;top:24px;bottom:auto;width:202px;border:1px solid #e0e8e5;border-radius:20px;flex-direction:column;gap:6px;padding:16px}
  .page:not(.fr-customer):not(.fr-staff){padding-right:230px}
  .page:not(.fr-customer):not(.fr-staff)>.bottom-nav .nav-item{width:100%;height:46px;flex-direction:row;justify-content:flex-start;gap:10px;padding:0 12px;border-radius:12px}
}

@media (min-width: 1280px){
  .fr-salon-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fr-customer-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}