.header{position:sticky;top:0;background:#ffffffea;backdrop-filter:blur(10px);border-bottom:1px solid #dbe6ff;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem 0}
.nav nav{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav nav a,.nav nav .btn{font-size:.95rem;min-height:40px;padding:.6rem .8rem;border-radius:10px}
.nav .active{font-weight:700}
.logo{font-weight:800;font-size:1.05rem}
.logo:hover{opacity:.9}

main{padding:1rem 0 1.6rem}
.hero{padding:1rem 0 1.4rem}
.actions{display:flex;gap:.7rem;flex-wrap:wrap}

.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid.two{grid-template-columns:repeat(2,minmax(180px,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(180px,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(180px,1fr))}

.search-row{display:grid;grid-template-columns:1.2fr repeat(6,minmax(120px,1fr)) auto auto;gap:.6rem;align-items:end}
.search-row input,.search-row select{margin:0}

.filter-card{padding:1rem;border-radius:14px;border:1px solid var(--line);background:#f9fbff}
.filter-card.no-border{border:0;background:transparent;padding:0}

.mobile-filters{margin-top:1rem}
.mobile-filters > summary{
  display:none;
  list-style:none;
  cursor:pointer;
  user-select:none;
}
.mobile-filters > summary::-webkit-details-marker{display:none}

.mobile-quickbar{
  display:none;
  position:sticky;
  top:62px;
  z-index:9;
  gap:.5rem;
  padding:.45rem;
  border:1px solid #d5e3ff;
  border-radius:12px;
  background:#ffffffea;
  backdrop-filter:blur(8px);
}
.mobile-quickbar .btn{
  width:auto;
  min-height:38px;
  padding:.5rem .7rem;
  font-size:.85rem;
}

.account-quickbar{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  position:sticky;
  top:62px;
  z-index:8;
  padding:.5rem;
  border:1px solid #d5e3ff;
  border-radius:12px;
  background:#ffffffeb;
  backdrop-filter:blur(8px);
}
.account-quickbar .btn{
  width:auto;
  min-height:38px;
  padding:.5rem .7rem;
  font-size:.85rem;
}

.detail-quickbar{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  position:sticky;
  top:62px;
  z-index:8;
  padding:.5rem;
  border:1px solid #d5e3ff;
  border-radius:12px;
  background:#ffffffea;
  backdrop-filter:blur(8px);
}
.detail-quickbar .btn{
  width:auto;
  min-height:38px;
  padding:.5rem .7rem;
  font-size:.85rem;
}

.footer{margin-top:2rem;padding:1rem 0;border-top:1px solid #dbe6ff}
.footer .actions .btn{padding:.55rem .8rem}

.mobile-dock{
  display:none;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:90;
  border-top:1px solid #cfe0ff;
  background:#ffffffef;
  backdrop-filter:blur(10px);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.mobile-dock a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:.45rem .4rem;
  border-radius:10px;
  font-size:.8rem;
  font-weight:600;
  text-align:center;
  color:#1e3a8a;
  background:#eef4ff;
}
.mobile-dock a.is-active{
  background:#2563eb;
  color:#fff;
}

.lock{margin-top:1rem;padding:1rem;background:#f9fbff;border:1px dashed #8aa5ff;border-radius:14px}
.lock-modal{position:fixed;inset:0;display:none;z-index:80}
.lock-modal.is-open{display:block}
.lock-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55)}
.lock-modal__content{position:relative;margin:8vh auto 0 auto;max-width:520px;background:#fff;border-radius:18px;padding:1rem;border:1px solid #c7d8ff;z-index:2}

.status{display:inline-block;padding:.2rem .55rem;border-radius:999px;font-size:.8rem;background:#e5edff;color:#1e3a8a;font-weight:600}
.status.ok{background:#d1fae5;color:#065f46}
.status.bad{background:#fee2e2;color:#991b1b}

@media (max-width:1024px){
  .search-row{grid-template-columns:repeat(3,minmax(170px,1fr))}
}

@media (max-width:920px){
  .grid.three{grid-template-columns:repeat(2,minmax(180px,1fr))}
  .grid.four{grid-template-columns:repeat(2,minmax(180px,1fr))}
}

@media (max-width:768px){
  .nav{align-items:flex-start;flex-direction:column}
  .nav nav{width:100%;display:flex;gap:.5rem;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:thin}
  .nav nav form{display:block !important}
  .nav nav .btn,.nav nav a{display:flex;width:auto;flex:0 0 auto;padding:.65rem .8rem;background:#eef4ff;border-radius:10px;text-align:center;white-space:nowrap}
  .footer .actions{display:grid;grid-template-columns:1fr;gap:.5rem}
  .mobile-dock{display:grid}

  .mobile-filters{border:1px solid #d6e4ff;border-radius:14px;background:#f7faff;padding:.25rem .7rem .7rem}
  .mobile-filters > summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight:700;
    color:#1e3a8a;
    padding:.7rem 0;
  }
  .mobile-filters > summary::after{
    content:'▼';
    font-size:.78rem;
    color:#3757a6;
    transition:transform .2s ease;
  }
  .mobile-filters[open] > summary::after{transform:rotate(180deg)}
  .mobile-quickbar{display:flex}
  .account-quickbar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.45rem;
    top:58px;
  }
  .account-quickbar .btn{width:100%}
  .detail-quickbar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    top:58px;
    gap:.45rem;
  }
  .detail-quickbar .btn{width:100%}

  .grid,.grid.two,.grid.three{grid-template-columns:1fr}
  .search-row{grid-template-columns:1fr}
  .actions .btn{width:100%}
  .actions select{width:100%}
  .lock-modal__content{margin:6vh 12px 0 12px;max-width:none}
}