/* reset */
* { box-sizing: border-box; margin:0; padding:0; }
html, body { height:100%; font-family:"Segoe UI",sans-serif; }

/* kontener przeglądarki */
.chrome { display:flex; flex-direction:column; height:100%; border:1px solid #ccc; }

/* pasek kart */
.tab-bar {
  display:flex; align-items:center;
  background:#f1f3f4; height:36px; padding:0 4px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
}
.tabs { display:flex; flex:1; overflow-x:auto; }
.tab {
  display:flex; align-items:center; padding:0 12px; margin-right:2px;
  background:#e8eaed; border-radius:3px 3px 0 0;
  cursor:pointer; position:relative; font-size:14px; color:#3c4043;
  transition: background 0.2s;
}
.tab.active { background:white; border-bottom:1px solid white; color:black; }
.tab .close { margin-left:8px; font-size:12px; cursor:pointer; }
.tab-add {
  width:32px; height:32px; background:none; border:none;
  font-size:20px; color:#5f6368; cursor:pointer; transition: color 0.2s;
}
.tab-add:hover { color:#202124; }

/* pasek narzędzi */
.toolbar {
  display:flex; align-items:center;
  background:white; height:48px; padding:0 8px;
  border-bottom:1px solid #dadce0;
}
.nav-group i,
.tools-group i {
  font-size:18px; color:#5f6368; margin:0 8px; cursor:pointer;
  transition: color 0.2s;
}
.nav-group i:hover,
.tools-group i:hover { color:#202124; }
.address-bar {
  flex:1; height:32px; margin:0 12px;
  border:1px solid #dadce0; border-radius:16px;
  padding:0 12px; font-size:14px; color:#3c4043;
  transition: box-shadow 0.2s;
}
.address-bar:focus { outline:none; box-shadow:0 0 0 2px #8ab4f8; }

/* obszar wyświetlania */
.content { flex:1; position:relative; background:#fff; }

/* zwykłe iframe */
.content iframe {
  width:100%; height:100%; border:none;
  position:absolute; top:0; left:0;
}

/* strona startowa: responsywna siatka */
.homepage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  justify-content: center;           /* wyśrodkowanie kolumn */
  padding: 40px 24px;
  max-width: 880px;                  /* szerokość całości */
  margin: 0 auto;                    /* wyśrodkuj kontener */
  max-width: clamp(300px, 80vw, 880px);
}

/* kafelek jako prostokąt z grafiką i gradientem */
.site-card {
  position: relative;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 12px 16px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s;
  margin-top: 5px;
}

/* półprzezroczysty overlay */
.site-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
}

/* zawartość nad overlayem */
.site-card span {
  position: relative;
  font-size: 14px;
  z-index: 1;
}

/* efekt hover */
.site-card:hover {
  transform: translateY(-4px);
}