html, body {
  min-height: 100%;
  height: auto;
  position: relative;
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

body {
  background: white;
  font-family: 'Roboto', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h2,
p,
.frp-container{
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center; /* Center vertically if it has a height */
 text-align: center;      /* Center text */
}

p{
 margin: 10px 0;;
}

h2{
  color:black;
  font-size: 1.5em;
  font-weight: bold;
 margin-top: 10px;
 margin-left: 15%;
 margin-right: 15%;
}

h5{
 background-color: #1769aa;
 color: white;
 padding: 5px;
 border-radius: 2px;
 border: solid;
 margin-bottom: 10px;
}

.frp-container{
 padding: 20px;
 gap: 10px;
 margin-bottom: 10px;
  max-width: 600px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 24px 18px;
  gap: 18px;
  margin-bottom: 22px;
  border-radius: 14px;
}

.settings-method{
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border: 1px solid rgba(255, 127, 144, 0.18);
}

.universal-method{
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border: 1px solid rgba(127, 255, 212, 0.18);
}

.samsung-method{
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border: 1px solid rgba(7, 176, 255, 0.18);
}

.extra-methods{
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border: 1px solid rgba(255, 255, 127, 0.18);
}

.frp-apk-list{
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border-radius: 8px;
  border: 1px solid rgba(33, 150, 243, 0.13);
  padding: 18px 14px;
  margin-bottom: 18px;
}

a {
  color: #2196f3;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.18s, border-bottom 0.18s;
  padding: 2px 4px;
  border-radius: 4px;
}

a:hover, a:focus {
  color: #1769aa;
  border-bottom: 2px solid #21cbf3;
  background: rgba(33, 203, 243, 0.08);
  outline: none;
}

.external-app{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 4px;
  border: solid 1px #ccc;
  background-color: rgba(255, 255, 255, 0.209);
  font-size: 0.9em;
  font-weight: 400;
}

.app {
  display: flex;
  align-items: center;           /* Vertically center icon and link */
  gap: 14px;                     /* Space between icon and link */
  margin: 8px 0;
  padding: 2px 0;
  background: none;              /* Remove background if any */
  border: none;                  /* Remove border if any */
}

.app img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  margin-right: 0;               /* Use gap instead */
}

.app a {
  font-size: 0.9em;
  font-weight: 700;
  color: #1976d2;
  text-align: left;
  transition: color 0.18s, text-shadow 0.18s;
  text-decoration: none;
  border-bottom: none;
  background: none;
  padding: 0;
}

.app a:hover, .app a:focus {
  color: #2196f3;
  text-shadow: 0 2px 8px rgba(33,150,243,0.10);
  outline: none;
}

/* Display .app items in columns using grid */
.frp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.frp-container > .app {
  width: 100%;
}

/* For column layout, use a wrapper for .app items */
.frp-app-list {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  gap: 14px 18px;
  width: 100%;
}

@media (max-width: 700px) {
  .frp-app-list {
    grid-template-columns: 1fr; /* Stack on small screens */
  }
}