*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    sans-serif;

  color:#111;

  background:
    radial-gradient(
      circle at 15% 10%,
      #dff5ff,
      transparent 35%
    ),
    radial-gradient(
      circle at 85% 90%,
      #e9e5ff,
      transparent 35%
    ),
    #f5f5f7;
}


/* HEADER */

.header{
  position:sticky;
  top:0;
  z-index:50;

  height:70px;

  padding:0 6%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  background:#ffffffb8;

  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);

  border-bottom:1px solid #fff;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;

  font-weight:700;
  font-size:18px;
}

.logo-icon{
  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  background:#111;
  color:#fff;
}

.admin-link{
  color:#111;
  text-decoration:none;
  font-size:14px;
}


/* MAIN */

.container{
  width:min(900px,92%);

  margin:auto;

  padding:
    70px
    0
    80px;
}

.hero{
  text-align:center;

  margin-bottom:35px;
}

.hero-icon{
  width:82px;
  height:82px;

  margin:auto;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:27px;

  background:#111;
  color:#fff;

  font-size:38px;

  box-shadow:
    0 20px 50px #0002;
}

.hero h1{
  margin:24px 0 8px;

  font-size:
    clamp(34px,6vw,52px);

  letter-spacing:-1.5px;
}

.hero p{
  margin:0;

  color:#777;
}


/* CARD */

.card{
  padding:30px;

  border-radius:30px;

  background:#ffffffcf;

  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);

  border:1px solid #fff;

  box-shadow:
    0 30px 80px #00000012;
}


/* SEARCH */

.search{
  display:flex;
  gap:10px;
}

input,
select{
  width:100%;

  border:1px solid #ddd;

  background:#fff;

  border-radius:15px;

  padding:15px;

  font-size:16px;

  outline:none;
}

input:focus,
select:focus{
  border-color:#111;

  box-shadow:
    0 0 0 4px #00000008;
}


/* BUTTON */

.primary-button{
  border:0;

  border-radius:15px;

  background:#111;

  color:#fff;

  cursor:pointer;

  transition:.2s;
}

.primary-button:hover{
  transform:translateY(-2px);
}

.primary-button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.search .primary-button{
  min-width:120px;
}

.scan-button{
  width:100%;

  height:52px;

  margin-top:12px;

  border:0;

  border-radius:15px;

  background:#eeeeef;

  color:#111;

  cursor:pointer;
}


/* QR READER */

#reader{
  display:none;

  margin-top:18px;

  overflow:hidden;

  border-radius:20px;

  background:#000;
}


/* LOADING */

.loading{
  display:none;

  padding:30px;

  text-align:center;

  color:#777;
}

.spinner{
  width:30px;
  height:30px;

  margin:
    0 auto 12px;

  border:
    3px solid #ddd;

  border-top-color:#111;

  border-radius:50%;

  animation:
    spin .7s linear infinite;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}


/* ERROR */

.error{
  display:none;

  margin-top:18px;

  padding:16px;

  border-radius:15px;

  background:#fff0f0;

  color:#c62828;

  text-align:center;
}


/* RESULT */

.result{
  display:none;

  margin-top:25px;
}

.status{
  padding:20px;

  border-radius:20px;

  text-align:center;

  font-size:18px;

  font-weight:700;

  margin-bottom:15px;
}

.status.active{
  background:#e9f9ef;
  color:#16833b;
}

.status.expired{
  background:#ffeded;
  color:#c62828;
}

.status.lifetime{
  background:#eaf4ff;
  color:#0878d1;
}


/* INFO */

.info-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:12px;
}

.info-item{
  padding:17px;

  border-radius:17px;

  background:#f7f7f8;
}

.info-item small{
  display:block;

  margin-bottom:6px;

  color:#888;

  font-size:13px;
}

.info-item strong{
  word-break:break-word;
}


/* FOOTER */

.footer{
  margin-top:25px;

  text-align:center;

  color:#999;

  font-size:13px;
}


/* ========================
   ADMIN
======================== */

.admin-page{
  background:
    radial-gradient(
      circle at 10% 10%,
      #dff6ff,
      transparent 35%
    ),
    radial-gradient(
      circle at 90% 90%,
      #e9e4ff,
      transparent 35%
    ),
    #f5f5f7;
}

.admin-header{
  background:#111;

  color:#fff;
}

.admin-header .logo{
  color:#fff;
}

.admin-actions{
  display:flex;

  align-items:center;

  gap:10px;
}

.admin-home{
  color:#fff;

  text-decoration:none;

  font-size:14px;
}

.logout-button{
  border:0;

  border-radius:10px;

  padding:9px 13px;

  background:#333;

  color:#fff;

  cursor:pointer;
}

.admin-container{
  width:min(1000px,92%);

  margin:
    0 auto;

  padding:
    55px
    0
    80px;
}

.admin-title{
  margin-bottom:25px;
}

.eyebrow{
  font-size:12px;

  font-weight:700;

  letter-spacing:2px;

  color:#777;
}

.admin-title h1{
  margin:8px 0;

  font-size:36px;
}

.admin-title p{
  margin:0;

  color:#777;
}


/* FORM */

.form-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:18px;
}

.field{
  display:flex;

  flex-direction:column;

  gap:8px;
}

.field label{
  font-size:14px;

  color:#666;
}

.add-button{
  width:100%;

  height:55px;

  margin-top:22px;

  font-size:16px;
}

.admin-error{
  display:none;

  margin-top:15px;

  padding:15px;

  border-radius:15px;

  background:#fff0f0;

  color:#c62828;

  text-align:center;
}


/* LOGIN */

.login-screen{
  min-height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:20px;
}

.login-card{
  width:min(430px,100%);

  padding:35px;

  border-radius:30px;

  background:#ffffffd9;

  backdrop-filter:blur(30px);

  -webkit-backdrop-filter:blur(30px);

  border:1px solid #fff;

  box-shadow:
    0 30px 90px #00000015;

  text-align:center;
}

.login-icon{
  width:70px;
  height:70px;

  margin:
    0 auto 20px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:22px;

  background:#111;

  font-size:30px;
}

.login-card h1{
  margin:
    0 0 8px;

  font-size:28px;
}

.login-card > p{
  margin:
    0 0 25px;

  color:#777;
}

.login-field{
  text-align:left;

  margin-bottom:15px;
}

.login-field label{
  display:block;

  margin-bottom:7px;

  color:#666;

  font-size:14px;
}

.login-button{
  width:100%;

  height:52px;

  margin-top:5px;

  font-size:16px;
}

.login-error{
  display:none;

  margin-top:15px;

  padding:13px;

  border-radius:14px;

  background:#fff0f0;

  color:#c62828;

  font-size:14px;
}

.back-home{
  display:block;

  margin-top:22px;

  color:#777;

  text-decoration:none;

  font-size:14px;
}


/* ========================
   POPUP
======================== */

.overlay{
  position:fixed;

  inset:0;

  z-index:100;

  display:none;

  align-items:center;

  justify-content:center;

  padding:20px;

  background:#0008;

  backdrop-filter:blur(12px);

  -webkit-backdrop-filter:blur(12px);
}

.popup{
  width:min(520px,100%);

  max-height:92vh;

  overflow:auto;

  padding:30px;

  border-radius:30px;

  background:#fff;

  box-shadow:
    0 40px 100px #0005;

  text-align:center;

  animation:
    popup .25s ease;
}

@keyframes popup{

  from{
    opacity:0;

    transform:
      scale(.92)
      translateY(15px);
  }

  to{
    opacity:1;

    transform:
      scale(1)
      translateY(0);
  }

}

.success-icon{
  width:70px;
  height:70px;

  margin:
    0 auto 18px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#e9f9ef;

  color:#159447;

  font-size:34px;
}

.popup h2{
  margin:
    0 0 7px;
}

.popup > p{
  margin:
    0 0 20px;

  color:#777;
}

.warranty-code{
  padding:16px;

  border-radius:16px;

  background:#f5f5f7;

  font-size:22px;

  font-weight:700;
}

.popup-label,
.qr-label{
  margin:
    20px
    0
    8px;

  text-align:left;

  color:#777;

  font-size:13px;
}

.link-box{
  display:flex;

  gap:8px;
}

.link-box input{
  min-width:0;

  background:#f5f5f7;

  font-size:14px;
}

.copy-button{
  height:50px;

  padding:
    0 18px;

  border:0;

  border-radius:14px;

  background:#111;

  color:#fff;

  cursor:pointer;

  white-space:nowrap;
}

.qrcode{
  display:flex;

  justify-content:center;

  padding:10px;
}

.qrcode img{
  border-radius:10px;
}

.share-button,
.close-button{
  width:100%;

  height:52px;

  margin-top:10px;

  border:0;

  border-radius:15px;

  font-size:16px;

  cursor:pointer;
}

.share-button{
  background:#007aff;

  color:#fff;
}

.close-button{
  background:#eee;

  color:#111;
}


/* HIDDEN */

.hidden{
  display:none !important;
}


/* MOBILE */

@media(max-width:650px){

  .header{
    padding:0 4%;
  }

  .admin-header{
    height:auto;

    min-height:70px;

    padding:
      14px 4%;
  }

  .admin-actions{
    gap:5px;
  }

  .admin-home{
    display:none;
  }

  .container{
    width:94%;

    padding:
      45px
      0
      60px;
  }

  .card{
    padding:20px;

    border-radius:23px;
  }

  .search{
    flex-direction:column;
  }

  .search .primary-button{
    width:100%;

    height:52px;
  }

  .info-grid,
  .form-grid{
    grid-template-columns:1fr;
  }

  .admin-container{
    width:94%;

    padding:
      40px
      0
      60px;
  }

  .login-card{
    padding:25px;
  }

  .popup{
    padding:23px;

    border-radius:24px;
  }

  .link-box{
    flex-direction:column;
  }

  .copy-button{
    width:100%;
  }

}