:root{
  --bg:#08101d;
  --card:#0f1b30;
  --text:#e9f1ff;
  --muted:#8ea3c7;
  --accent:#3b82f6;
  --line:#1d2d4d;
}

*{box-sizing:border-box}

html{
  height:100%;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(180deg,#06101f 0%, #0a1630 100%);
  color:var(--text);
  overflow-x:hidden;
}

.app{
  width:100%;
  max-width:620px;
  margin:0 auto;
  min-height:100dvh;
  padding:
    max(16px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(20px, calc(env(safe-area-inset-bottom) + 16px))
    max(14px, env(safe-area-inset-left));
  display:flex;
  flex-direction:column;
  gap:12px;
}

.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-top:2px;
}

h1{
  margin:0;
  font-size:clamp(18px, 5vw, 30px);
  line-height:1.1;
  letter-spacing:-0.02em;
}

.mode{
  display:flex;
  gap:6px;
  flex-shrink:0;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.05);
  padding:4px;
  border-radius:14px;
}

.mode button{
  border:0;
  min-height:42px;
  padding:0 14px;
  border-radius:10px;
  background:#132340;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
}

.mode button.active{
  background:var(--accent);
  color:#fff;
}

.grid{
  background:rgba(15,27,48,.96);
  border:1px solid rgba(94,130,201,.18);
  border-radius:18px;
  padding:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-content:start;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.span2{
  grid-column:span 2;
}

label{
  font-size:13px;
  color:var(--muted);
}

input,select{
  width:100%;
  min-height:48px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#081425;
  color:#fff;
  padding:0 12px;
  font-size:16px;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
}

input:focus,select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(59,130,246,.16);
}

.result{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(142,163,199,.28);
  border-radius:14px;
  background:rgba(8,20,37,.55);
  padding:10px;
  text-align:center;
}

#result{
  font-size:clamp(28px, 8vw, 40px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.03em;
}

.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:2px;
}

.actions button{
  min-height:50px;
  border:0;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  font-size:16px;
  font-weight:700;
}

.actions button:active,
.mode button:active{
  transform:translateY(1px);
}

@media (max-width: 520px){
  .app{
    gap:10px;
    padding:
      max(14px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(18px, calc(env(safe-area-inset-bottom) + 12px))
      max(10px, env(safe-area-inset-left));
  }

  .top{
    align-items:flex-start;
    flex-direction:column;
  }

  .mode{
    width:100%;
  }

  .mode button{
    flex:1 1 0;
    min-width:0;
    font-size:13px;
    padding:0 10px;
  }

  .grid{
    padding:12px;
    gap:9px;
  }
}

@supports not (min-height: 100dvh){
  .app{
    min-height:100vh;
  }
}