* { box-sizing: border-box; }

:root{
  --bg:#f5f7fb;
  --bg2:#edf2f9;
  --card:rgba(255,255,255,.82);
  --line:rgba(159,174,199,.28);
  --line2:rgba(159,174,199,.42);
  --text:#1f2938;
  --muted:#7e899f;
  --blue1:#8ab2ff;
  --blue2:#5f8fff;
  --icon:#7f90aa;
  --ok:#2caa6b;
  --bad:#d85c5c;
  --shadow:0 30px 80px rgba(113,132,164,.16);
}

html, body { min-height:100%; }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}
button, input { font: inherit; }

.scene{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.shape{
  position:absolute;
  border-radius:999px;
  border:1px solid rgba(231,236,244,.92);
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(245,248,252,.48));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 50px rgba(152,168,196,.08);
}
.shape--a{
  left:-120px; bottom:40px; width:480px; height:480px;
}
.shape--b{
  right:-140px; top:-160px; width:620px; height:620px;
}
.shape--c{
  right:80px; bottom:70px; width:280px; height:180px; border-radius:34px; transform:rotate(14deg);
}
.dots{
  position:absolute;
  left:90px; top:100px; width:260px; height:160px; opacity:.35;
  background-image: radial-gradient(#c0cad7 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}

.page{
  position:relative;
  min-height:100vh;
  padding:40px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.auth-card, .disk{
  position:relative;
  z-index:2;
  width:min(100%, 760px);
  border-radius:40px;
  background:var(--card);
  backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:var(--shadow);
}
.auth-card{
  padding:52px 96px 58px;
}
.logo{
  width:110px; height:72px; margin:0 auto 18px;
}
.logo svg{ display:block; width:100%; height:auto; }
h1,h2,p{ margin-top:0; }
h1{
  margin-bottom:12px;
  text-align:center;
  font-size:60px;
  line-height:.95;
  letter-spacing:-.06em;
  font-weight:500;
}
.subtitle{
  margin-bottom:0;
  text-align:center;
  color:var(--muted);
  font-size:22px;
}
.subtitle.small{
  text-align:left;
  font-size:16px;
}
.form{
  display:grid;
  gap:24px;
  margin-top:34px;
}
.field{
  display:grid;
  gap:12px;
}
.field > span{
  font-size:18px;
  font-weight:500;
}
.control{
  position:relative;
  height:72px;
}
.control input{
  width:100%; height:100%;
  padding:0 68px 0 68px;
  border-radius:20px;
  border:1.5px solid var(--line);
  outline:none;
  background:rgba(255,255,255,.72);
  color:var(--text);
  font-size:20px;
}
.control input:focus{
  border-color:rgba(102,145,255,.6);
  box-shadow: 0 0 0 6px rgba(117,156,255,.09);
}
.icon, .eye svg{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  fill:none;
  stroke:var(--icon);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon{ left:22px; }
.eye{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:40px; height:40px;
  display:grid; place-items:center;
  border:0; background:transparent; cursor:pointer;
}
.submit-btn{
  height:72px;
  margin-top:4px;
  border:0;
  border-radius:22px;
  color:#fff;
  font-size:22px;
  font-weight:500;
  cursor:pointer;
  background:linear-gradient(180deg,var(--blue1),var(--blue2));
  box-shadow: 0 18px 42px rgba(98,139,255,.35), inset 0 1px 0 rgba(255,255,255,.34);
}
.message{
  min-height:22px;
  margin:-4px 0 0;
  text-align:center;
  color:var(--bad);
}
.message.good{ color:var(--ok); }
.hidden{ display:none !important; }

.disk{
  max-width:980px;
  padding:34px;
}
.disk__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.eyebrow{
  margin-bottom:8px;
  color:#5f8fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
h2{
  margin-bottom:10px;
  font-size:46px;
  line-height:.98;
  letter-spacing:-.05em;
}
.logout{
  padding:14px 18px;
  border:1px solid var(--line2);
  border-radius:16px;
  background:rgba(255,255,255,.76);
  cursor:pointer;
}
.usage{
  margin:28px 0 24px;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(191,204,223,.4);
  background:rgba(255,255,255,.64);
}
.usage__top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.usage__top span{ color:var(--muted); }
.usage__bar{
  height:14px;
  border-radius:999px;
  overflow:hidden;
  background:#ecf1f8;
}
.usage__bar span{
  display:block; width:38%; height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--blue1),var(--blue2));
}
.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.tile{
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(191,204,223,.4);
  background:rgba(255,255,255,.64);
}
.emoji{
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#eff4fb);
  font-size:28px;
}
.tile strong, .tile small{ display:block; }
.tile strong{ font-size:18px; }
.tile small{ margin-top:6px; color:var(--muted); }

.gif-overlay{
  position:fixed; inset:0; z-index:10;
  display:grid; place-items:center;
  padding:24px;
  background:rgba(245,248,252,.72);
  backdrop-filter:blur(12px);
}
.gif-box{
  width:min(420px,100%);
  padding:14px;
  border-radius:28px;
  border:1px solid rgba(201,211,227,.9);
  background:rgba(255,255,255,.94);
  box-shadow:0 28px 80px rgba(113,132,164,.22);
}
.gif-box img{
  display:block; width:100%; max-height:420px; object-fit:contain; border-radius:18px;
}

@media (max-width: 820px){
  .auth-card{ padding:36px 24px 42px; }
  .disk{ padding:24px; }
  .grid{ grid-template-columns:1fr; }
  h1{ font-size:46px; }
  .subtitle{ font-size:18px; }
}

@media (max-width: 560px){
  .control{ height:64px; }
  .control input{ font-size:18px; padding-left:60px; }
  .submit-btn{ height:64px; font-size:20px; }
  .disk__header{ flex-direction:column; }
  .logout{ width:100%; }
}