:root{
    --mma-primary:#0d6efd; --mma-accent:#ed9229; --mma-dark:#0b1220;
    --mma-text:#0f172a; --mma-muted:#64748b; --mma-border:#e2e8f0;
    --mma-soft:#f8fafc; --mma-surface:#ffffff;
    --ok-bg:#e8f5e9; --ok-text:#1b5e20; --warn-bg:#fff7ed; --warn-text:#9a3412;
    --mma-ease:cubic-bezier(.2,.8,.2,1); --mma-fast:.16s;
    --mma-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans";
    --mma-h1:clamp(1.35rem,1.05rem + 1.2vw,2rem);
    --bs-primary:var(--mma-primary);
    --bs-body-bg:var(--mma-soft);
    --bs-body-color:var(--mma-text);
    --bs-border-color:var(--mma-border);
    --bs-border-radius:14px;
    --bs-link-color:var(--mma-primary);
    --bs-link-hover-color:#0b5ed7;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{font-family:var(--mma-font);background:var(--mma-soft);color:var(--mma-text)}
  .body-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
    background-image:
      radial-gradient(60rem 30rem at 10% -10%, rgba(13,110,253,.12), transparent),
      radial-gradient(40rem 20rem at 90% 10%, rgba(237,146,41,.12), transparent);
    background-repeat:no-repeat;
  }
  :focus-visible{outline:2px solid rgba(13,110,253,.7);outline-offset:2px;border-radius:8px}
  
  .navbar{background:rgba(255,255,255,.72);border-bottom:1px solid var(--mma-border);
    -webkit-backdrop-filter:saturate(160%) blur(6px);backdrop-filter:saturate(160%) blur(6px)}
  html[data-bs-theme="dark"] .navbar{background:rgba(15,21,34,.55)}
  .navbar-brand{display:flex;align-items:center;gap:.6rem;font-weight:800}
  .navbar-brand .logo{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--mma-primary),#4f46e5);color:#fff;font-weight:800}
  
  .app-hero{position:relative;padding:clamp(18px,3vw,32px) 0;border-radius:20px;
    background:linear-gradient(180deg, rgba(13,110,253,.08), rgba(237,146,41,.08));
    border:1px solid var(--mma-border)}
  html[data-bs-theme="dark"] .app-hero{background:linear-gradient(180deg, rgba(13,110,253,.10), rgba(237,146,41,.10))}
  .app-hero h1{font-size:var(--mma-h1);margin:0 0 6px;color:var(--mma-primary);font-weight:800}
  .app-hero p.lead{color:var(--mma-muted);margin:0}

  .filter-bar{display:grid;gap:10px;grid-template-columns:1fr}
  @media (min-width:768px){
    .filter-bar{grid-template-columns:minmax(240px,320px) 1fr auto;align-items:end}
  }
  .filter-bar .form-select,.filter-bar .form-control{
    border-radius:12px;padding:.7rem .9rem;border:1px solid var(--mma-border);background:var(--mma-surface);
    transition:box-shadow var(--mma-fast) var(--mma-ease),border-color var(--mma-fast) var(--mma-ease)}
  .filter-bar .form-select:focus,.filter-bar .form-control:focus{
    border-color:var(--mma-primary);box-shadow:0 0 0 4px rgba(13,110,253,.15)
  }
  
  .btn-buy{
    --bs-btn-bg:var(--mma-primary);--bs-btn-border-color:var(--mma-primary);
    --bs-btn-hover-bg:#0b5ed7;--bs-btn-hover-border-color:#0b5ed7;--bs-btn-color:#fff;
    border-radius:10px;box-shadow:0 6px 14px rgba(13,110,253,.22)
  }
  .btn-checkout{
    --bs-btn-bg:var(--mma-accent);--bs-btn-border-color:var(--mma-accent);
    --bs-btn-hover-bg:#d37e21;--bs-btn-hover-border-color:#d37e21;--bs-btn-color:#fff;
    border-radius:10px;box-shadow:0 6px 14px rgba(237,146,41,.28)
  }
  
  .table-wrap{border:1px solid var(--mma-border);border-radius:16px;background:var(--mma-surface);overflow:hidden}
  .product-table{margin:0}
  .product-table thead th{
    background:var(--mma-surface);
    position:sticky; top:0; z-index:2;
    border-bottom:1px solid var(--mma-border);
  }
  .table-tight th,.table-tight td{padding:.65rem .75rem;vertical-align:middle}
  .product-table tbody tr:hover{background:rgba(13,110,253,.05)}
  .product-table code{background:rgba(0,0,0,.04);padding:.1rem .35rem;border-radius:6px}
  
  .product-chip{display:flex;align-items:center;gap:10px}
  .product-chip img{
    width:40px;height:40px;border-radius:50%;
    object-fit:contain;background:#fff;padding:4px;
    box-shadow:0 1px 4px rgba(0,0,0,.06);display:block
  }
  .product-chip .name{font-weight:600;line-height:1.1}
  .product-chip .sub{color:var(--mma-muted);font-size:.85rem}
  .product-table td.nowrap, .product-table th.nowrap { white-space: nowrap; }
  .product-chip { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
  .product-chip .name { white-space: nowrap; }
  
  .badge-issue{background:var(--warn-bg)!important;color:var(--warn-text)!important;font-weight:800;border-radius:999px}
  
  .skeleton{position:relative;overflow:hidden;background:linear-gradient(90deg,#e9eef5 25%,#f3f6fb 37%,#e9eef5 63%);
    animation:shimmer 1.35s infinite linear}
  @keyframes shimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}
  .skel-row{height:44px;border-bottom:1px solid var(--mma-border)}
  .skel-bar{height:12px;width:60%;border-radius:8px}
  
  .swal2-popup{border-radius:18px!important;background:var(--mma-surface)!important;color:var(--mma-text)!important;border:1px solid var(--mma-border)!important}
  .swal2-title{color:var(--mma-primary)!important;font-weight:700!important}
  .swal2-styled.swal2-confirm{background:var(--mma-primary)!important;border-radius:12px!important;font-weight:600!important}
  .swal2-styled.swal2-cancel{background:var(--mma-accent)!important;border-radius:12px!important;font-weight:600!important}
  .swal2-input,.swal2-select,.swal2-textarea{border-radius:12px!important;border:1px solid var(--mma-border)!important;background:var(--mma-surface)!important;color:var(--mma-text)!important;padding:.7rem .9rem!important;box-shadow:none!important}
  .swal2-input:focus,.swal2-select:focus,.swal2-textarea:focus{border-color:var(--mma-primary)!important;box-shadow:0 0 0 4px rgba(13,110,253,.15)!important}
  .swal2-html-container{color:var(--mma-muted)!important}
  .swal2-timer-progress-bar{background:rgba(13,110,253,.3)!important}

  .swal2-html-container .form-label {
    display:block;
    margin-bottom: .35rem;
    font-weight:600;
  }
  .swal2-html-container .swal2-input {
    margin:0 0 .75rem 0;
  }

  .logo-img {
    height: 32px;
    width: auto;
    object-fit: contain;
  }
  
  .brand-text {
    color: var(--mma-primary);
    font-weight: 800;
  }  
  
  .footer-modern {
    background: linear-gradient(135deg, rgba(13,110,253,.08), rgba(237,146,41,.08));
    border-radius: 20px;
    border: 1px solid var(--mma-border);
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
    transition: transform .3s var(--mma-ease);
  }
  .footer-modern:hover {
    transform: translateY(-3px);
  }
  
  .footer-modern h3 {
    font-weight: 700;
    color: var(--mma-text);
  }
  
  .footer-modern .footer-list li {
    margin-bottom: .4rem;
  }
  
  .footer-modern .footer-list a {
    text-decoration: none;
    position: relative;
    transition: color .25s;
  }
  .footer-modern .footer-list a::after {
    content: "";
    position: absolute;
    bottom: -2px; left: 0;
    width: 0%; height: 2px;
    background: var(--mma-primary);
    transition: width .25s;
  }
  .footer-modern .footer-list a:hover {
    color: var(--mma-primary);
  }
  .footer-modern .footer-list a:hover::after {
    width: 100%;
  }
  
  .social-links a {
    font-size: 1.35rem;
    color: var(--mma-muted);
    transition: transform .25s, color .25s;
  }
  .social-links a:hover {
    color: var(--mma-primary);
    transform: scale(1.2);
  } 
  
  @media (max-width:575.98px){
    .navbar .container,.navbar .container-fluid{padding-inline:12px}
    .table-tight th,.table-tight td{padding:.55rem .6rem}
  }

  @media (max-width: 991.98px) {
    .navbar .container { position: relative; }

    .navbar .collapse.navbar-collapse {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--mma-surface);
      padding: 1rem;
      z-index: 1050;
      border-bottom: 1px solid var(--mma-border);
      box-shadow: 0 8px 16px rgba(0,0,0,.08);
    }

    .navbar .navbar-nav .nav-link { padding: .5rem .25rem; }

    body.menu-open::before{
      content:"";
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.25);
      z-index: 1040;
    }
  }
  
